vue-cli2.0 implements the introduction of global css style

Step by step implementation of vue-cli2.0 introduces global css style.

Introduce less and sass-resources-loader

npm install less less-loader --save

npm install sass-resources-loader --save-dev

Go to build> utils.js

Find the function generateLoaders (where the function is declared) and copy the following code behind this function

function lessResourceLoader() {
    
    
      var loaders = [
          cssLoader,
          'less-loader',
          {
    
    
              loader: 'sass-resources-loader',
              options: {
    
    
                  resources: [
                      path.resolve(__dirname, '../src/assets/style/public.less'),
                  ]
              }
                      }
      ];
      if (options.extract) {
    
    
          return ExtractTextPlugin.extract({
    
    
              use: loaders,
              fallback: 'vue-style-loader'
          })
      } else {
    
    
          return ['vue-style-loader'].concat(loaders)
      }
}

The copied code looks like

)

Change parameters

Then change the parameter of the generateLoaders function to less when calling it to less: lessResourceLoader('less'). See the figure below for details

Declare global variables

Then declare the less variable in public.less . See the figure below for details

Call global variable

Now you can call the variables declared above in any .vue file. See the figure below for details

ok, all done.

If you have any questions, please reply to me. Even a typo. Wang
-Erha