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