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

Question

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

但是，由于我没有任何使用 Webpack 的经验，所以我很难设置它。

到目前为止我做了什么：

使用 create-react-app
已安装 node-sass 和 sass-resources-loader
在我的 project-folder/node_modules/react-scripts/webpack.config.js 线上 595 我添加了

{ 测试：/.scss$/, 利用： [ { 装载机：“风格装载机”， }, { 装载机：“css-装载机”， }, { 装载机：“sass-装载机”， }, { 装载机：“sass-资源装载机”， } ], }

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

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

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

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

Answer 1

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

1) 我已经卸载了不再需要的 sass-reasources-loader 并还原了 webpack.config.js

中的更改

2) 已安装 CRACO and 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 中提供的链接。

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

How to setup Webpack using Create-React-App for sass-resources-loader?

css

reactjs

webpack

sass

webpack-4