反応アプリをSCSSに設定するにはどうすればよいですか？ （エラー）

Question

私はSASSをSCSS形式で使用できるように私の反応プロジェクトをセットアップしようとしています。

これは私のwebpack.config.dev.jsである：

 { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     use: [ 
      require.resolve('style-loader'), 
      { 
      loader: require.resolve('css-loader'), 
      options: { 
       importLoaders: 1, 
      }, 
      }, 
      { 
      loader: require.resolve('sass-loader'), 
      } 
     ] 
     } 

私は2つの異なる方法で私のJSXにSCSSファイルをインポートする：私は、私はアプリを実行すると

import './index.scss'; 
import css from './ModalWrapper.scss'; 

現在、エラーが発生しています：

./src/index.scss 
Module build failed: 
body { 
^ 
     Invalid CSS after "m": expected 1 selector or at-rule, was "module.exports = __" 
     in /pathtoapp/web/src/index.scss (line 1, column 1) 

私は、SCSSをCSSと解釈しようとしていますrk。さらに、反応は身体が有効なCSSではないと考えています。 CSSやSCSSが正しく読み込まれているとは思えません。

ご協力いただければ幸いです。この問題には未解決の問題がかなりあります。

Answer 1

これは私のために働いてしまったものです：

{ 
     test: /\.scss$/, 
     use: [{ 
      loader: 'style-loader' 
     }, { 
      loader: 'css-loader', 
      options: { 
      modules: true, 
      sourceMap: true, 
      localIdentName: "[local]___[hash:base64:5]", 
      }, 
     }, { 
      loader: 'sass-loader', 
      options: { 
      outputStyle: "expanded", 
      sourceMap: true, 
      }, 
     }] 
     }, 

Answer 2

あなたはWebPACKの3の上にある場合は、module.rules

{ 
    test: /\.scss$/, 
    loader: [ 
     require.resolve('style-loader'), 
     require.resolve('css-loader'), 
     require.resolve('sass-loader'), 
    ] 
}, 

にこれを追加し、ファイルローダーを追加し、この

{ 
     loader: require.resolve('file-loader'), 
     // Exclude `js` files to keep "css" loader working as it injects 
     // it's runtime that would otherwise processed through "file" loader. 
     // Also exclude `html` and `json` extensions so they get processed 
     // by webpacks internal loaders. 
     exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/,], 
     options: { 
      name: 'static/media/[name].[hash:8].[ext]', 
     }, 
} 

などの主要excludeの配列に.scssを追加してくださいもちろん、style-loader、sass-loader、css-loader、file-loaderがpackage.jsonに含まれていることを確認してください。このコードスニペットは、create-react-appの最新バージョンを使用しているときに役立ちました。

Answer 3

私は内部のWebPACKの一部を消去し（私は他の回答も同じくらい優れていると確信しているが、最大簡潔にするため、これは私のために動作します。おそらく人々の反応生成によって作らconfig.dev.jsのコメント）：

module: { 
strictExportPresence: true, 
rules: [ 
     { 
      test: /\.scss/, 
      use: ['style-loader','css-loader', 'sass-loader'] 
     },... 

それが重要かどうかは知りませんが、私は上にこれを置きます。また、上記のように除外された配列にscssファイルを追加してください。