Question

我正在尝试设置我的反应项目，因此我可以使用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)

看来我，那个，反应是试图将SCSS解释为应该起作用的CSS。另外，反应认为身体不是有效的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]',
        },
}

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

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

Answer 3

我确信其他答案也同样好，但为了最简洁，这对我有用（我删除了一些内部webpack.config.dev.js评论，可能是由创建反应人员做出的）：

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

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

如何使用SCSS设置反应应用程序？（错误）

3 个答案:

如何使用SCSS设置反应应用程序？ （错误）

3 个答案:

如何使用SCSS设置反应应用程序？（错误）