如何使用 SCSS 设置 React 应用程序？（错误）答案

【问题标题】：How to setup react app with SCSS? (Errors)如何使用 SCSS 设置 React 应用程序？（错误）
【发布时间】：2017-11-07 19:45:33
【问题描述】：

我正在尝试设置我的 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 都没有正确加载。

任何帮助将不胜感激。这个问题有很多未解决的问题。

【问题讨论】：

您是将每个 scss 文件导入到不同的组件中 - 组件样式，还是只是将根 scss 文件导入您的根应用程序文件中？
我将 scss 文件导入到组件样式的不同组件中。但是，我还想为常量和字体提供几个全局 scss 文件。
嗯，它比简单的答案要复杂一些，但我认为本文将帮助您完成安装和设置 -> medium.com/@srinisoundar/…
为什么在加载器上需要 require.resolve？只需对上面配置中的其他加载程序执行 loader: 'saas-loader' 和类似操作。
我也试过了@VishalMalik

标签： reactjs webpack sass node-sass

【解决方案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]',
        },
}

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

【讨论】：

保护器~！我花了 2 个小时找出我的 webpack 配置有什么问题，这个解决了我的问题~！谢谢~！

【解决方案2】：

这就是最终对我有用的东西：

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

【讨论】：

【解决方案3】：

我确信其他答案也一样好，但为了尽可能简洁，这对我有用（我删除了一些可能由 create react 人员制作的内部 webpack.config.dev.js cmets）：

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

我不知道这是否重要，但我把它放在了最上面。另外，是的，请确保将 scss 文件添加到排除的数组中，如上所述。

【讨论】：