在vue項目中使用sass的配置方法_vue.js

1、創(chuàng)建一個基于 webpack 模板的新項目

$ vue init webpack myvue

2、在當前目錄下，安裝依賴

$ cd myvue
$ npm install

3、安裝sass的依賴包

npm install --save-dev sass-loader
//sass-loader依賴于node-sass
npm install --save-dev node-sass

4、在build文件夾下的webpack.base.conf.js的rules里面添加配置

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

如下圖所示：

5、在APP.vue中修改style標簽

<style lang="scss">

6、然后運行項目

$ npm run dev

7、修改APP.vue的樣式，可以看下效果

8、運行結(jié)果背景變成灰色嗎，說明你已成功配置好sass

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注Gxl網(wǎng)其它相關文章！

推薦閱讀：

在vue-router里query動態(tài)傳參步驟有哪些

本地開發(fā)環(huán)境不能用IP訪問如何處理

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com