向已弹出的 create-react-app 配置中添加 Sass (.scss)

Question

我想在使用create-react-app创建的应用中添加.scss支持。

我已经通过运行npm eject命令弹出了应用，并安装了必要的依赖项：npm install sass-loader node-sass --save-dev

在config / webpack.config.dev.js文件中，我将以下代码片段添加到loaders中：

{
   test: /\.scss$/,
   include: paths.appSrc,
   loaders: ["style", "css", "scss"]
},

所以现在加载器数组的开头看起来像这样：

loaders: [
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: require('./babel.dev')
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      // LOAD & COMPILE SCSS
      {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: ["style", "css", "scss"]
      },

现在在我的jsx文件中，当我尝试导入scss文件时：

import './assets/app.scss';

我遇到了错误：

Uncaught Error: Cannot find module "./assets/app.scss"

因此，我的配置可能有问题，因为我无法加载.scss文件。如何调整配置以在create-react-app中引入.scss文件？

- bukowski

Answer 1

当我尝试将sass集成到空的React项目中时，我使用了这篇文章。但是那里提供的解决方案并没有起作用，我遇到了与主题中类似的错误。 在我的情况下，用require.resolve('style-loader')替换style-loader有所帮助：

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

- Greg Wozniak

Answer 2

请检查第一个加载器，首先它获取所有文件，并排除其他加载器的文件。

loaders: [
        {
            exclude: [
                /\.html$/,
                /\.(js|jsx)$/,
                /\.css$/,
                /\.json$/,
                /\.svg$/
            ],
            loader: 'url',
            query: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]'
            }
        },

所以添加

/\.sass$/,
/\.scss$/,

排除的话，似乎解决了我遇到的相同问题：D

- Ayaz Hussein

Answer 3

好的，我找到了解决方案-从这个改变：

{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ["style", "css", "scss"]
},

转换为：

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},

现在我的 .scss 文件已经加载成功了！

- bukowski

---

或者{ test: /\.scss$/, include: path.appSrc, loaders: [ 'style-loader', 'css-loader', 'sass-loader'] },对我有用。 - t3__rry

Answer 4

根据最新配置[CRA]。

::webpack.config.dev.js::

{
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    loaders: [
        require.resolve("style-loader"), // creates style nodes from JS strings
        require.resolve("css-loader"), // transl ates CSS into CommonJS
        require.resolve("sass-loader") // compiles Sass to CSS
      ]
  },

- Venkat Ch

---

无法工作。消息：模块构建失败：TypeError：this.getResolve不是函数。 - Mendes

Answer 5

你可能需要使用

include: paths.appSrc,

有启用webpack热重载的选项。因此，您的配置片段可能如下所示：

{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ['style', 'css', 'sass']
},

- Akhmedzianov Danilian

Answer 6

请检查此加载器设置以获取最新版本。

{
     test: /\.scss$/,
     use: [
         "style-loader", // creates style nodes from JS strings
         "css-loader", // translates CSS into CommonJS
         "sass-loader" // compiles Sass to CSS
    ]
}

- Robert