css - 如何编辑 webpack 以在 React 应用程序中使用 SCSS？

Question

我使用 create-react-app 创建了一个新的 React 应用程序(使用 React 版本 16.6.3)。现在我想为我的组件使用 SCSS。所以首先我运行了弹出脚本。然后在 webpack.config.dev.js 中我做了以下编辑:

{
   test: cssRegex,
   exclude: cssModuleRegex,
   use: getStyleLoaders({
          importLoaders: 1,
          modules: true,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }),
}

我还安装了 node-sass 包。

然后我创建了我的测试 .scss 文件:

.Test {
  background-color: gold;
  .Header {
    color: lighten(purple, 20%);
  }
}

我的测试组件导入了 .scss 文件

import React from 'react';
import style from './test.scss';

const Test = (props) => (
  <div className={style.Test}>
    This is div1
    <div className={style.Header}>Div 2</div>
  </div>
);

export default Test;

那没有用，我没有看到任何样式。我尝试直接导入 .scss 并使用它:

import './test.scss';

...
<div className='Test'>
  This is div1
  <div className={style.Header}>Div 2</div>
</div>
...

确实有效，我在 div 上看到了带有 className='Test' 的样式。

我尝试按如下方式更改 webpack:

const CSSModuleLoader = {
  loader: 'css-loader',
  options: {
    modules: true,
    sourceMap: true,
    localIdentName: '[local]__[hash:base64:5]',
    minimize: true
  }
}

const CSSLoader = {
  loader: 'css-loader',
  options: {
    modules: false,
    sourceMap: true,
minimize: true
  }
}

const postCSSLoader = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    sourceMap: true,
    plugins: () => [
      autoprefixer({
        browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
      })
    ]
  }
}

...

{
  test: /\.scss$/,
  exclude: /\.module\.scss$/,
  use: ['style-loader', CSSLoader, postCSSLoader, 'sass-loader']
},
{
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    CSSModuleLoader,
    postCSSLoader,
    'sass-loader',
  ]
},

起初我遇到了一个autoprefixer not defined错误。我用 const autoprefixer = require('style-loader') 导入它 - 这使得这个错误消失了，尽管我仍然不相信这是正确的要求和正确的修复。

但是我得到了以下错误:

无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。
- configuration.module.rules[2].oneOf[0].use 应该是其中之一:
非空字符串 |功能 | object { loader?, options?, ident?, query? } |功能 | [非空字符串 |功能 | object { loader?, options?, ident?, query? }]
-> 规则匹配时应用于模块的修饰符
细节:
* configuration.module.rules[2].oneOf[0].use 应该是一个字符串。
* configuration.module.rules[2].oneOf[0].use 应该是函数的一个实例
* configuration.module.rules[2].oneOf[0].use 应该是一个对象。
* configuration.module.rules[2].oneOf[0].use 应该是函数的一个实例
* configuration.module.rules[2].oneOf[0].use[1] 应该是一个字符串。
* configuration.module.rules[2].oneOf[0].use[1] 应该是函数的一个实例
* configuration.module.rules[2].oneOf[0].use[1] 有一个未知的属性 'loaders'。这些属性是有效的:
object { loader?, options?, ident?, query? }


不知道怎么处理...

如何将 webpack 配置为在同一目录中立即将 .scss 编译为 .css(这样我可以导入 .css 并定期将其与 style.Class 一起使用)或使用 . scss 以相同的方式导入我的文件，然后将其编译为 .css 以用于生产？

Answer 1

请在 webpack 文件中使用以下规则并删除多余的代码。

rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]