vue+sass定義全局變量，后綴名.scss報錯之解決

vue在現在程序員圈中，已經是眾所周知了，那么在我們去使用vue的過程中經常會使用強大的css預處理語言sass，那么在這個過程中我們有各種問題，下面我們就簡單的介紹其中一個小編碰到的問題；

在使用scss中，我們定義了變量方便更改整個項目的配色，那么我們在main.js中引入全局scss文件，但直接引入scss文件會報錯。

那么針對此類問題我們有兩種處理方式

第一、各個組件中引入（這個方法的弊端相信大家都看得到，就是需要在每一個組件中引入，寫重復的代碼）如下：

import ../assets/css/common.scss;

這種方式很顯然我們每個程序員都是不推薦的；

第二、全局引入

首先，需要安裝一個開發插件：sass-resources-loader

npm i sass-resources-loader --save-dev

接著，修改我們腳手架中build/utils.js文件，修改scss的加載設置

return { 
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'), 
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'), 
    stylus: generateLoaders('stylus'), 
    styl: generateLoaders('stylus')
 }

修改為：

 return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass').concat({
         loader: 'sass-resources-loader',
         options: {
             resources: path.resolve(__dirname, '../src/assets/css/common.scss')
          }
     }),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
  }

之后重新啟動項目，并且在main.js中引入公共的常量文件即可。