vue 配置 scss（區域性）

1.安裝依賴，輸入命令 ： npm install sass-loader node-sass vue-style-loader --save-dev

2.找到/build/webpack.base.conf.js檔案。如果需要在main.js中引入樣式檔案，不需要配置此檔案。否則會編譯報錯。

 module: {
    rules: [{
        test: /\.(scss|css)?$/,
        loaders: ["style", "css", "sass"]
      },
    ]
}

3.使用 scss 

<style scoped lang="scss">
@import 'color.scss';
</style>

vue 配置 scss（全域性引用變數）

1.安裝依賴，輸入命令：

npm install node-sass sass-loader style-loader --save-dev    

2： 安裝sass-resources-loader  （如果不安裝的話變數會報錯）

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

3： 修改build中的utils.js，或者在main.js中引入。

    scss: generateLoaders('sass'),

    修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/style/main.scss') //這裡寫自己的檔案路徑
        }
      }
    )

4：在元件中的style標籤新增lang="scss"。