Vue中SASS如何全局使用变量，mixin，或者function-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

在写Vue时，如果组件要引入sass或less的写法，就到到处引@import，这样一旦调整变量的目录，所有的组件引入的地址都需要修改。在这种情况下可以使用sass-resources-loader

比如在全局定义一个@function,我们打算移动端工程里用vm函数代替px，

那么我们只能在工程里每个.vue我们都@import ./mixin.scss，这样重复性的工作谁都不愿意做，万一这个文件路径改了，那真的无语了。

今天科普一个东西 sass-resources-loader，
这个东西就可以省去在每个.vue里都@import你需要的变量,mixin,function。（它不仅支持SASS，还支持LESS，POSTCSS等）?。

那么在这里分享下我是如何在vue工程里配置：
1.vue-cli构建的vue工程里，都会有build文件夹，这里主要是放webpack的配置。找到util.js

2.往里面添加

// =========
  // SASS 配置
  // =========
   function resolveResouce(name) {
      return path.resolve(__dirname, '../src/assets/scss/' + name);
  }
  function generateSassResourceLoader() {
      var loaders = [
        cssLoader, 
        // 'postcss-loader',
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
              // it need a absolute path
              resources: [resolveResouce('var.scss'), resolveResouce('mixins.scss')]
            }
        }
      ];
      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
        })
      } else {
        return ['vue-style-loader'].concat(loaders)
      }
  }

最终，大功告成，以下代码就可以编成这样的效果：3.往文件下面找到

将sass,scss里的内容改为我们刚刚写的函数，即