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

Question

我想使用CSS模块和SASS来构建一个项目。我想要一些全局样式（混合、变量、函数等），这些样式将在每个component.module.scss中都可用。为此，我需要将我的全局样式导入到每个单独的模块样式文件中。由于我预计会有很多组件，因此我正在寻找自动执行此操作的选项。我找到了sass-resources-loader，可能会对此有所帮助。

然而，由于我没有Webpack的任何经验，我在设置它时遇到了麻烦。

到目前为止，我已经完成以下工作：

1.使用create-react-app创建了我的react应用程序。 2.安装了node-sass和sass-resources-loader。 3.在project-folder/node_modules/react-scripts/webpack.config.js的第595行中添加了以下代码：

``` javascript { test: /.scss$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "sass-loader", }, { loader: "sass-resources-loader", } ], } ```

抱歉我无法使该代码片段正确显示。我还尝试了options字段：

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

但是无论如何都不起作用，我在我的模块化 SCSS 文件中仍然得到 undefined 变量。

我做错了什么？还是有其他方法来解决这个问题？

- MadGrip

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

- MadGrip

---

正在使用 cra 和 typescript，使用 eslint 进行代码检查时可能会遇到解析错误："parserOptions.project" 已为 @typescript-eslint/parser 设置。他们可以参考此线程解决这个问题：https://dev59.com/ElMH5IYBdhLWcg3wvh-E#64488474 - sagg1295