vue項(xiàng)目配置sass及引入外部scss文件方式
配置sass及引入外部scss文件
配置sass
安裝對(duì)應(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ì)嘗試找到對(duì)應(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如何實(shí)現(xiàn)自定義步驟條問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
訪問百度音樂API需要傳遞音樂類型參數(shù)，而這些參數(shù)是存在musictype.json中，現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù)，如何實(shí)現(xiàn)呢，下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù)，感興趣的朋友一起看看吧2022-09-09
詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了自定義vue組件發(fā)布到npm的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue自定義指令實(shí)現(xiàn)元素滑動(dòng)移動(dòng)端適配及邊界處理
這篇文章主要為大家介紹了vue自定義指令實(shí)現(xiàn)元素滑動(dòng)移動(dòng)端適配及邊界處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件，使用window.requestAnimationFrame（首選，次選setTimeout）來循環(huán)數(shù)字動(dòng)畫，詳細(xì)代碼跟隨小編一起看看吧2022-09-09
淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令
這篇文章主要介紹了淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue如何解決兄弟組件之間傳值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue踩坑之在input中使用filters局部過濾器問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
解決Vue項(xiàng)目打包后打開index.html頁面顯示空白以及圖片路徑錯(cuò)誤的問題
這篇文章主要介紹了解決Vue項(xiàng)目打包后打開index.html頁面顯示空白以及圖片路徑錯(cuò)誤的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10