vue項(xiàng)目配置sass及引入外部scss文件方式
配置sass及引入外部scss文件
配置sass
安裝對應(yīng)依賴node模塊
npm install node-sass --save-dev npm install sass-loader --save-dev
引入外部scss文件
在main.js中引入需要的scss文件
如果顯示錯(cuò)誤為如下圖所示
打開webpack.base.config.js，刪除掉注釋部分的代碼。因?yàn)関ue-cli 項(xiàng)目里面配置了編譯scss的，只要你裝node-sass 和sass-loader，不需要自己添加配置。
記住此時(shí)需要重啟項(xiàng)目 npm run dev
踩過的坑 Vue引入Sass文件
問題：在使用vue cli 3.0開發(fā)自己網(wǎng)頁的過程中，想把CSS樣式單獨(dú)抽離出來，因?yàn)镾ass的嵌套寫法顯得層次十分清晰，所以我個(gè)人是十分喜歡的。
但是在CSS樣式單獨(dú)抽離形成文件之后再引入，發(fā)現(xiàn)只有第一層樣式作用上了。
問題來了，為什么呢？
CSS
.section{
/* 只有這層作用上了 */
width: 500px;
height: 500px;
background-color: #409EFF;
.header{
width: 500px;
height: 100px;
background-color:#67C23A
}
.main{
width: 500px;
height: 300px;
background-color:#E6A23C;
}
.footer{
width: 500px;
height: 100px;
background-color:#F56C6C;
}
}
首先我嘗試了在vue文件中直接寫Sass樣式，結(jié)果是可以作用上的，但是為什么單獨(dú)抽離出來沒作用？
然后再把命令運(yùn)行一次
npm install --save-dev node-sass sass-loader style-loader
vue cli 3.0 之后就沒有config.js、build等文件或文件夾，所以不用配置，直接使用就可以了。
命令運(yùn)行完之后還是不行。
于是開始百度，隱隱約約感覺到問題出現(xiàn)在引入的時(shí)候，而不是解析的時(shí)候。
百度 @import url("./xxx.sass") 和 @import “./xxx.sass” 的區(qū)別
得到官方答案
Sass支持原生的CSS@import，sass會(huì)嘗試找到對應(yīng)的sass文件并導(dǎo)入進(jìn)來，但在下列三種情況下會(huì)生成原生的CSS@import：
- 被導(dǎo)入文件的名字以.css結(jié)尾
- 被導(dǎo)入文件的名字是一個(gè)URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應(yīng)服務(wù)；
- 被導(dǎo)入文件的名字是CSS的url()值。
這就是說，你不能用sass的@import直接導(dǎo)入一個(gè)原始的css文件，因?yàn)閟ass會(huì)認(rèn)為你想用css原生的@import。但是，因?yàn)閟ass的語法完全兼容css，所以你可以把原始的css文件改名為.scss后綴，即可直接導(dǎo)入了。
所以造成一開始Sass文檔解析不正確。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue 2中實(shí)現(xiàn)截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來捕獲屏幕或特定元素的截圖,以下是一個(gè)簡單的步驟和示例代碼來實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2023-10-10
vue2使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽
這篇文章主要為大家詳細(xì)介紹了vue2如何使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11
Vue中$emit調(diào)用父組件異步方法模擬.then實(shí)現(xiàn)方式
這篇文章主要介紹了Vue中$emit調(diào)用父組件異步方法模擬.then實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫向斜切柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)詳析
埋點(diǎn)分析是網(wǎng)站分析的一種常用的數(shù)據(jù)采集方法,下面這篇文章主要給大家介紹了關(guān)于如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例
這篇文章主要給大家介紹了關(guān)于vue cli3.0結(jié)合echarts3.0與地圖的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
這篇文章主要介紹了vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡單實(shí)例代碼
這篇文章主要介紹了Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡單實(shí)例代碼,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06