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文件聲明的變量和函數。無需引入。

原文鏈接： https://blog.csdn.net/qq_41339126/article/details/109484010