Sketch

Recently, due to project requirements, many articles about scss public have been reviewed. Here is a brief summary of those articles

Solution

a. When we want to use the sharing of scss files, first we need to think about how we should edit scss files, such as reducing the coupling between variables and mixing in scss files. We can separate variables from mixing in scss files to use separate file storage, and we can also write some scss files in default styles.

• variable.scss: File that stores SCSS variables

  @charset 'utf-8';
  $bg:skyblue;
  $w:100px;
  $h:100px;
  $tsize:50px;
  $w2:200px;
  $h2:200px;

• mixin.scss: Stores files mixed by SCSS

  @charset 'utf-8';
  @mixin wh($w,$h) {
    width: $w;
    height: $h;
    border: 1px solid red;
  }

• base.scss: The SCSS file that stores the default style

  @charset 'utf-8';
  .test{
    border: 5px solid pink;
    height: 100px;
    width: 100px;
  }

b. The key now is how to make vue components use the common scss files that we define. Of course, we can also import the corresponding scss files in each component using the import statement, but this can lead to bloated code that is difficult to maintain.So we can solve this problem with tools.

a. Method 1

If the vue-cli version is a lower version, we can modify the build/utils.js in the vue-cli directory by using the plug-in sass-resources-loader.This enables the sharing of scss files.

• Step 1: Install the sass-resources-loader plug-in first.

  npm i sass-resources-loader --save-dev

• Step 2: Modify the utils.js file in the build folder, find the return option, modify its scss property to configure it for the next step, and leave the rest unchanged.

  return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateLoaders('sass', { indentedSyntax: true }),
      //Modify this scss property
      scss: generateLoaders('sass').concat({
        loader:'sass-resources-loader',  
            options:{  
            resources:[
              path.resolve(__dirname,'../src/assets/variable.scss'),
              path.resolve(__dirname,'../src/assets/mixin.scss'),
              path.resolve(__dirname,'../src/assets/base.scss')  
            ]
            }
      }),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }

• Step 3: During the test phase, create a new Test.vue component to configure

  <template>
    <div>
      <!-- test Default Style for Classes -->
      <div class="test">
        test
      </div>
      <div class="box2">
        ssss
      </div>
    </div>
  </template>
  <style lang="scss">
    .test{
      //Accessing common scss variables  
      font-size:$tsize;
      background: $bg;
    }
    .box2{
      //Access public scss mixing  
      @include wh($w2,$h2) 
    }
  </style>

  

b. Method 2

If you are using a higher version of vue-cli, you can directly modify the css.loaderOptions option of the vue.config.js file to allow each component to use a common scss file.

• Step 1: Also install the sass-resources-loader plug-in first.

  npm i sass-resources-loader --save-dev

• Step 2: Create a new vue.config.js configuration file in the project home directory. Approximate configurations refer to this article

  const path=require('path')
    module.exports={
      publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
      assetsDir:'assets',
      indexPath:'myIndex.html',
      filenameHashing:false,
      productionSourceMap: false,
      css: {
        loaderOptions: {
            sass: {
                //Common scss variables imported in turn, common scss mixes, common default styles
                prependData: `
                    @import "./src/assets/css/variable.scss";
                 @import "./src/assets/css/mixin.scss";    
                    @import "./src/assets/css/base.scss";
                `
            }
        }
      }
    }

• Step 3: Test phase, as in Step 3 of Method 1.

c. Method 3

If the version of vue-cli you are using is a high version, you can directly modify the chainWebpack property of the vue.config.js file to make multiple scss files public.

• Step 1: Also install the sass-resources-loader plug-in first.

  npm i sass-resources-loader --save-dev

• Step 2: Create a new vue.config.js configuration file in the project home directory. Approximate configurations refer to this article

  const path=require('path')
  module.exports={
    publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
    assetsDir:'assets',
    indexPath:'myIndex.html',
    filenameHashing:false,
    productionSourceMap: false,
    chainWebpack:config=>{
      const types=['vue']
      types.forEach(type=>{
        config.module.rule('scss').oneOf(type).use('style-resource')
        .loader('style-resources-loader')
        .options({
          patterns:[
            //Common scss variables  
            path.resolve(__dirname,'./src/assets/css/variable.scss'),
            //Common scss mixing  
            path.resolve(__dirname,'./src/assets/css/mixin.scss'),
            //Common Default Style  
            path.resolve(__dirname,'./src/assets/css/base.scss')
          ]
        })
      })
    }
  }

• Step 3: Test phase, as in Step 3 of Method 1.

Reference Documents

Use of chainWebpack in vue-cli
Reference to.SCSS common files in vue