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

骑猪看日落 2022-11-20 05:51 675阅读 0赞

--------------------

> 在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文件声明的变量和函数。无需引入。