学习笔记——react如何全局配置sass

---

在react中，在src文件夹下，新建assets文件夹，其内存放一些公共的scss文件。在组件需要使用scss文件时，需要在组件的样式中用@import导入。由于需要频繁使用公共的scss文件，每次都需要使用@import导入。这样会很麻烦。代码要更优雅。为了达到这个目的，需要对公共的scss文件进行全局配置，这样组件使用时，就不用导入。

1.下载必要的包： 

该项目需要sass-resources-loader，customize-cra，react-app-rewired三个包，可以用于yarn add或者npm install + 包名下载。

yarn add sass-resources-loader
yarn add customize-cra
yarn add react-app-rewired

 2.配置新文件：

在项目的根目录下，新建一个名为config-overrides.js的文件，在文件中进行配置，使项目可以在不暴露webpack.config.js文件的情况下，修改其配置。

// 使用sass作为全局变量
const { override, adjustStyleLoaders }  = require("customize-cra");

module.exports = override(
        // 配置指定文件为sass全局文件，可以不用导入就可以使用
        adjustStyleLoaders(rule => {
                if (rule.test.toString().includes('scss')) {
                        rule.use.push({
                                loader: require.resolve('sass-resources-loader'),
                                options: {
                                        resources: [
                                                './src/assets/_vars.scss',
                                                './src/assets/_mixin.scss',
                                                './src/assets/_func.scss',
                                                './src/assets/_public.scss'
                                        ]
                                }
                        });
                }
        })
);

 resources节点中的是需要进行全局配置的scss文件。

3.修改package.json文件：

 如果想要sass的全局配置起效，需要修改package.json文件后，再重启项目。

"scripts": {
		"start": "set PORT=8888&&react-app-rewired start",
		"build": "react-app-rewired build",
		"test": "react-app-rewired test",
		"eject": "react-app-rewired eject"
	},

 全部配置好后，就可以在任意组件的scss文件中，使用公共scss文件声明的变量和函数。无需引入。