vue2中使用sass并配置全局的sass样式变量的方法

sass语言

      sass是一种强大的css扩展语言（css本身并不是一门语言），它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言（如java、c#、ruby等）有的一些特性，并且完全兼容css语法。sass有助于保持大型样式表结构良好。

      sass有两种语法。

      一种称为scss，是一个css3语法的扩充版本，也就是说，所有符合css3语法的样式表也都是具有相同语法意义的scss文件，scss样式表文件要以.scss扩展名结尾。在vue中，我们可以使用<style lang="scss"></style>来标志里面的内容是以scss语法来书写的。

      一种称为sass，是sass以前的语法，它和python一样，没有{}大括号来标志程序块，而是以缩进来标志嵌套层级；而且也不使用分号，而是用换行符来分隔属性。sass样式表文件要以.sass扩展名结尾。在vue中，我们可以使用<style lang="sass"></style>来标志里面的内容是以sass语法来书写的。

在vue中使用样式文件sass，如果每个.vue文件都引入该样式，build出来文件后，势必会造成样式的重复，冗余，如果在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。那么，全局设置并加载样式就显得很有必要了！

首先，npm安装好

 "sass-loader": "^6.0.7",
 "sass-resources-loader": "^1.3.3",

在build/webpack.base.conf.js中，在module的rules里添加

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

然后在build/utils.js文件中加入如下代码：

需要注意的是：我的全局样式是放在src/common/sass/index.scss中的

 function resolveresouce(name) {
  return path.resolve(__dirname, '../src/common/sass/' + name);
 }
 function generatesassresourceloader() {
  var loaders = [
   cssloader,
   'postcss-loader',
   'sass-loader',
   {
    loader: 'sass-resources-loader',
    options: {
     //这是用到的sass文件，多个文件时用数组的形式传入，这是带有变量和mixin的scss文件
     resources: [resolveresouce('variable.scss'), resolveresouce('mixin.scss')] 注意这是我全局样式的位置，个人不同，需做调整
    }
   }
  ];
  if (options.extract) {
   return extracttextplugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

最后，将该页面下方的return部分，改成如下模样

 return {
  css: generateloaders(),
  postcss: generateloaders(),
  less: generateloaders('less'),
  //sass: generateloaders('sass', { indentedsyntax: true }),
  //scss: generateloaders('sass'),
  sass: generatesassresourceloader(),
  scss: generateloaders('sass')
   .concat(
    {
     loader: 'sass-resources-loader',
     options: {
      resources: path.resolve(__dirname, '../src/common/sass/index.scss') //注意这是我全局样式的位置，个人不同，需做调整
     }
    }
   ),
  stylus: generateloaders('stylus'),
  styl: generateloaders('stylus')
 }

总结

以上所述是小编给大家介绍的vue2中使用sass并配置全局的sass样式变量，希望对大家有所帮助