如何使用 Create-React-App 为 sass-resources-loader 设置 Webpack？

Question

我想用 CSS 模块 + SASS 构建一个项目。我想要一些全局样式（mixins、变量、函数等），它们将在每个 component.module.scss 中可用。为此，我需要将我的全局样式导入每个模块样式文件。由于我希望有很多组件，我一直在寻找自动执行此操作的选项。我找到了 sass-resourcess-loader ，可能会有所帮助。

但是，由于我没有任何使用 Webpack 的经验，我在设置它时遇到了麻烦。

到目前为止我做了什么：

1. 使用 create-react-app 创建了我的 react 应用
2. 已安装 node-sass 和 sass-resources-loader
3. 在我的 project-folder/node_modules/react-scripts/webpack.config.js 行 595 我添加了

{ 测试：/.scss$/， 采用： [ { 加载器：“样式加载器”， }, { 加载器：“css加载器”， }, { 装载机：“萨斯装载机”， }, { 加载器：“sass-资源加载器”， } ], }

抱歉，我无法以某种方式正确设置代码 sn-p 样式。我也尝试过选项字段：

options: {
 resources: "./src/global.scss"
}

但没有任何效果，我的模块化 scss 文件中仍然有未定义的变量。

我做错了什么？或者有没有其他方法可以解决这个问题？

Answer 1

好的，我找到了 CRACO（创建 React 应用配置覆盖）的解决方案。

1) 我已经卸载了不再需要的 sass-reasources-loader 并恢复了 webpack.config.js 中的更改

2)已安装CRACO和craco-sass-resources-loader

3) 在我的项目的根目录中创建了 craco.config.js 文件并添加了这个：

const sassResourcesLoader = require("craco-sass-resources-loader");

module.exports = {
    mode: "development",
    output: {
        path: __dirname,
    },
    plugins: [
        {
            plugin: sassResourcesLoader,
            options: {
                resources: "./src/global.scss",
            },
        },
    ],
};

4) 在 package.json 我将脚本更改为：

"start": "craco start",

"build": "craco build",

现在一切正常。如果您需要更多信息，请单击第 2 步中提供的链接。