Vue introduces sass and configures global variables

Introducing sass

First, use the official scaffolding vue-cli to build the framework. I won’t explain it here, just check the official website.

After installing all dependencies, install the sass dependency package:

npm install --save-dev sass-loader
//sass-loader depends on node-sassnpm install --save-dev node-sass

Then in the build folderAdd configuration in rules:

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'sass']
}

Then add the csslang property. Note that this is scss, and the suffix of the css file is also scss:

<style lang="scss"></style>

Finally, you need to recompile the project, otherwise it will be of no effect.

$ npm run dev

Now you can use sass at will. At this time, you will find that if I want to define several variables for global use, it seems that I can only pass it in the page@importTo introduce it, this is obviously not elegant enough and can be solved like this.

Configure sass global variables

There is a babel plugin that perfectly solves this problem:sass-resources-loaderYou can access any sass module that needs to be accessed. So, you can use shared variables and mix all SASS styles without going to reference every file.

First, install the plug-in:

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

Then find it in the build folder Modify the configuration of the sass compiler loader and copy the following code directly:

// Global file introduction Of course, if you only want to compile one file, you can save this functionfunction resolveResource(name) {
 return (__dirname, '../src/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // Multiple files are passed in the form of an array, and you can use it directly for a single file (__dirname, '../static/style/'    resources: [resolveResource('')] 
   }
  }
  ];
  if () {
   return ({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

Change the default sass configuration to generateSassResourceLoader()。

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // vue-cli default sass configuration  // sass: generateLoaders('sass', { indentedSyntax: true }), 
  // scss: generateLoaders('sass'),
  // The newly introduced sass-resources-loader  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

After changing the configuration, you can restart the serviceThe global variable is defined and referenced on the page.

It should be noted that the variables in the scss are$At the beginning, the variable in less is@beginning. For example, I want to define the main tone variable of a project, I canDefinition in this way:

$c-primary: #fd7a00;
$theme-blue: #3296fa;
$theme-red: #da3838;

When referring to a variable, just refer to the variable name directly.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.