Application scenarios

Avoid importing globally defined SASS variable files repeatedlyCopy the code

1. Install sass-resouces-Loader

  yarn add sass-resources-loader -D
Copy the code

Official explanation: This loader puts @import your SASS resources into each required SASS module. Therefore, you can use shared variables and mixins in all SASS styles without having to import them manually in each file. Use CSS modules!

2. Configure React

  • Exposing profiles

    yarn run eject
Copy the code

  • Find webpack.config.js in the config folder, and then find the following code

    {
    test: sassModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 3.sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
                getLocalIdent: getCSSModuleLocalIdent,
            },
        },
        'sass-loader')},Copy the code

  • Add the following code after the getStyleLoaders function

    concat({
         // This line means to introduce the sas-resources-loader
        loader: 'sass-resources-loader'.options: {
                // Write global sass file path
              resources: [path.resolve(__dirname,'. /.. /src/assets/css/index.scss')]}})Copy the code

  • The final code

    { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: GetCSSModuleLocalIdent,},}, 'ass-loader'). Concat ({// this line means to import the ass-resources-loader loader: 'sass-resources-loader', options: {// here is the path to write global sass files resources: [path.resolve(__dirname, './../src/assets/css/index.scss')] } }), }Copy the code

  • Restart the project