如何使用 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. 在我的项目文件夹/node_modules/react-scripts/webpack.config.js 的第595行中，我添加了

{ test: /.scss$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "sass-loader", }, { loader: "sass -资源加载器", } ], }

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

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 中提供的链接。