reactjs - 如何使用 SCSS 设置 React 应用程序？ (错误)

Question

我正在尝试设置我的 React 项目，以便可以以 SCSS 格式使用 SASS。

这是在我的 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'),
          }
        ]
      }

我以两种不同的方式将 scss 文件导入到我的 jsx 中:

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)

在我看来，React 正在尝试将 SCSS 解释为应该可以工作的 CSS。另外，react认为body不是有效的CSS。在那里，我相信 CSS 或 SCSS 都没有正确加载。

如有任何帮助，我们将不胜感激。这个问题还有很多未解答的问题。

Answer 1

如果您使用的是 Webpack 3，请将其添加到 module.rules

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

然后添加文件加载器，并确保将 .scss 添加到键 exclude 的数组中，如下所示

{
        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]',
        },
}

当然，请确保您有 style-loader、sass-loader、css-loader 和 file-loader 在你的 package.json 中。当使用最新版本的 create-react-app 时，此代码片段对我有用。