Vue 项目里如何引用全局 Sass 变量文件

现在每个项目都可能会用到sass了，但是怎么在vue项目里引入一个variables.scss变量文件供整个项目使用呢？本文将为一些刚用vue的新人讲解一下。

本文环境

Vue 2.x + Vue-CLI 3.x

方法一：增加vue.config.js配置

要在项目下的 vue.config.js 里进行配置（如果没有这个文件，在项目根目录手动创建一下即可）：

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `data` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `
        @import "assets/styles/variables.scss";
        @import "assets/styles/variables1.scss";
        @import "assets/styles/px2rem.scss";
                        `
      },
    }
  },
  chainWebpack: config => {
    config
      .resolve.alias
      .set('@', resolve('src'))    //配置src目录别名
      .set('assets', resolve('src/assets'))    //配置src/assets目录别名
      .set('components', resolve('src/components'));    //配置src/components目录别名
  }
}

这样配置完，就可以在所有的组件里使用变量了，不需要手动去每个组件里引入变量文件了。切记路径根据自己的项目修改，不要盲目复制！！！

方法二： sass-resources-loader

这个loader可以将你的.scss文件作为全局引入，但是这个是要与 webpack 结合的。官网在这。

安装

npm install sass-resources-loader

配置
要在项目下的webpack.config.js里进行配置：

/* Webpack@2: webpack.config.js */

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            // Provide path to the file with resources
            resources: './path/to/resources.scss',

            // Or array of paths
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },
  ],
},