vue在現(xiàn)在程序員圈中，已經(jīng)是眾所周知了，那么在我們?nèi)ナ褂胿ue的過程中經(jīng)常會(huì)使用強(qiáng)大的css預(yù)處理語言sass，那么在這個(gè)過程中我們有各種問題，下面我們就簡(jiǎn)單的介紹其中一個(gè)小編碰到的問題；

創(chuàng)新互聯(lián)是專業(yè)的榮縣網(wǎng)站建設(shè)公司，榮縣接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行榮縣網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

在使用scss中，我們定義了變量方便更改整個(gè)項(xiàng)目的配色，那么我們?cè)?code>main.js中引入全局scss文件，但直接引入scss文件會(huì)報(bào)錯(cuò)。

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

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

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

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

第二、全局引入

首先，需要安裝一個(gè)開發(fā)插件：sass-resources-loader

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

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

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')
  }

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