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']
          },
        },
      ],
    },
  ],
},