Analysis on how vue introduces sass global variables

This article mainly introduces the analysis of how vue introduces sass global variables. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Sass or less provide variable settings , use less or sass variables in projects that require switching themes. This article mainly introduces the introduction of sass global variables in vue, which has certain reference value. Interested friends can refer to

sass or less Both provide variable settings. Use less or sass variables in projects that need to switch themes. As long as you modify the variable value, all styles using the variable will be modified to the effect you want after compilation. However, for projects built in vue-cli , introduce a scss file globally in main.js, define variables in it, and report variable undefined errors when referenced in other components or pages. Other styles can be displayed normally, which is obviously a compilation problem.

Foolish Reference

Introduce the global style file into every component that uses global variables

@import 'path/fileName.scss'

But the components or pages are not in the same directory, and the imported paths may be different, so let’s look at the solution of sass-resources-loader .

sass-resources-loader introduces sass global variables

sass-resources-loader can access sass resources and any sass module that needs to be accessed. So, you can use shared variables and mix all SASS styles without having to reference them in every file.

Install sass-resources-loader

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

Modify sass configuration

at Find util.js in the build folder Modify the configuration of the sass compiler loader

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
 return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
 var loaders = [
  cssLoader,
  'sass-loader',
  {
   loader: 'sass-resources-loader',
   options: {
    // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: [resolveResource('common.scss')] 
   }
  }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

The call to modify the sass configuration isgenerateSassResourceLoader()

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // vue-cli默认sass配置
  // sass: generateLoaders('sass', { indentedSyntax: true }), 
  // scss: generateLoaders('sass'),
  // 新引入的sass-resources-loader
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

References the common.scss file in main.js , Restart the service, and the variables defined in it can be used in other components.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the form item verification method in the v-for loop when vue uses the Element component

Introduction to Vue webapp project packaging native APP through HBulider

The above is the detailed content of Analysis on how vue introduces sass global variables. For more information, please follow other related articles on the PHP Chinese website!