這篇“vue2如何配置scss”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“vue2如何配置scss”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

成都創(chuàng)新互聯(lián)公司是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十年以來，已經(jīng)為上千多家LED顯示屏各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的上千多家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

1、安裝文件

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

2、配置 webpack.base.conf.js

找到webpack.base.conf.js文件的module模塊下面的rules添加以下代碼

...
{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
},
...

注意：這里loaders和文件中其他配置不同加了s

3、使用

1、在使用的地方如下寫法

  div {
    a {
      color: red
     }
    }

2、@import外部導(dǎo)入，如果不加scoped如果在app.vue中導(dǎo)入那么就是全局scss

 @import './assets/scss/global.scss';
 * {
  color: red
 }

這樣寫下面的覆蓋外部引入的

注意遇到的坑

報錯

/node-sass/vendor no such file or directory in node-sass......

解決方法，運(yùn)行 rebuild解決了

npm/cnpm rebuild node-sass --save-dev

更詳細(xì)的解決方案如下：

根據(jù)package.json,進(jìn)行npm install node_modules, 運(yùn)行npm run dev時候,報錯,錯誤如下.

查看node_modules文件夾,發(fā)現(xiàn),并無vender 文件夾.如下圖:

解決辦法:

上圖node-sass文件夾下,新建 vender 文件夾.然后運(yùn)行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夾,如下圖所示:

就可以了

感謝你的閱讀，希望你對“vue2如何配置scss”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實(shí)驗(yàn)使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！