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

Posted 2023-03-07

【中文标题】如何编辑 webpack 以在 React 应用程序中使用 SCSS？

【英文标题】：How to edit webpack to use SCSS in React app?

【发布时间】：2019-05-04 13:14:37

【问题描述】：

我使用 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') 导入了它——这使这个错误消失了，尽管我仍然不相信这是正确的要求和正确的修复。

然后我得到以下错误：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module.rules[2].oneOf[0].use should be one of these: non-empty string | function | object loader?, options?, ident?, query? | function | [non-empty string | function | object loader?, options?, ident?, query? ] -> Modifiers applied to the module when rule is matched Details: * configuration.module.rules[2].oneOf[0].use should be a string. * configuration.module.rules[2].oneOf[0].use should be an instance of function * configuration.module.rules[2].oneOf[0].use should be an object. * configuration.module.rules[2].oneOf[0].use should be an instance of function * configuration.module.rules[2].oneOf[0].use[1] should be a string. * configuration.module.rules[2].oneOf[0].use[1] should be an instance of function * configuration.module.rules[2].oneOf[0].use[1] has an unknown property 'loaders'. These properties are valid: object loader?, options?, ident?, query?

不知道怎么处理...

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

【问题讨论】：

你检查过npmjs.com/package/sass-loader 吗？

@phng 是的，这是我尝试过的事情之一。虽然我没有收到任何错误，但它仍然没有编译成 .css 文件。除非我做错了什么……

【参考方案1】：

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

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

【讨论】：

“删除额外代码”是什么意思？我按原样尝试了您的建议，并在我的 test.scss 中收到以下“编译失败”错误：.Test ^ Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi" in work-path\my-project\src\components\test.scss (line 1, column 1)

他对额外代码的意思是你应该删除你自己试图编译 sass 的代码，并用官方示例替换它。或者查看这个 postCSS + Sass 示例配置：github.com/mrmartineau/webpack-recipes/blob/master/css/sass/… 当我比较两个配置文件（你的和 mrmartineau 的 github 之一）时，我猜你集成 PostCSS 错误。

@lgal 我在“use:”数组中看不到 postCSSLoader 的要求。你可以参考这个文件github.com/guptagovind/react-redux-boilerplate/blob/master/…

我尝试了一切，但仍然没有运气。我得到了 .scss 样式，但它们没有编译成 .css。 postcss-loader 在 getStyleLoaders 方法中加载。我知道我没有在这里复制粘贴它，但这里有一个指向我当前 webpack.config.dev 的 pastebin 的链接：pastebin.com/HuX84Cnc我在这里缺少什么？