WebPACKの2 SASS-ローダー予期しない文字 '@'

Question

私は次のWebPACKの2つのルールの設定があります。

Unexpected character '@' (1:0) 
You may need an appropriate loader to handle this file type. 
| @media screen and (min-width: 40em) { 
| .feature { 
|  margin-bottom: 8.75rem; 
@ ./~/style-loader?{"camelCase":true,"localIdentName":"[name]_[local]_[hash:base64:3]","modules":true}!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?{"sourceMap":true,"outputStyle":"expanded","include":["/opt/inmoblex/current/inmoblex/cfg/src/styles","node_modules"]}!./src/components/LandingFeature/styles.scss 4:14-310 

¿間違って何ですか？

:) .scssはsass-loader、resolve-url-loaderとpostcss-loaderで処理された後、あなたはstyle-loaderを使用しているヘルプ

rules: [ 
    { 
    test: /\.css$/, 
    use: [ 
     { loader: 'isomorphic-style-loader' }, 
     { loader: 'css-loader' }, 
     { loader: 'postcss-loader' }, 
    ] 
    }, 
    { 
    test: /\.scss/, 
    use: [ 
     { loader: 'isomorphic-style-loader' }, 
     { 
     loader: 'style-loader', 
     options: { 
      camelCase: true, 
      localIdentName: '[name]_[local]_[hash:base64:3]', 
      modules: true 
     } 
     }, 
     { loader: 'postcss-loader' }, 
     { loader: 'resolve-url-loader' }, 
     { 
     loader: 'sass-loader', 
     options: { 
      sourceMap: true, 
      outputStyle: 'expanded', 
      include: [ 
      path.resolve(__dirname, "./src/styles"), 
      "node_modules", 
      ], 
     } 
     }, 
    ] 
    }, 
    { 
    test: /\.json/, 
    use: [ 
     { loader: 'json-loader' }, 
    ] 
    }, 
    { 
    test: /\.(png|jpg|gif|woff|woff2)$/, 
    use: [{ 
     loader: 'url-loader', 
    }] 
    }, 
    { 
    test: /\.(mp4|ogg|svg)$/, 
    use: [{ 
     loader: 'file-loader', 
    }] 
    }, 
], 

Answer 1

ため

感謝。この結果はまだCSSなので、JavaScriptに変換するcss-loaderが必要です。 isomorphic-style-loaderを使用しているため、style-loaderは不要で、渡されたオプションからはcss-loaderであったはずです。したがって名前を変更してstyle-loaderをcss-loaderに変更します。

{ 
    test: /\.scss/, 
    use: [ 
    { loader: 'isomorphic-style-loader' }, 
    { 
     loader: 'css-loader', 
     options: { 
     camelCase: true, 
     localIdentName: '[name]_[local]_[hash:base64:3]', 
     modules: true 
     } 
    }, 
    { loader: 'postcss-loader' }, 
    { loader: 'resolve-url-loader' }, 
    { 
     loader: 'sass-loader', 
     options: { 
     sourceMap: true, 
     outputStyle: 'expanded', 
     include: [ 
      path.resolve(__dirname, "./src/styles"), 
      "node_modules", 
     ], 
     } 
    }, 
    ] 
},