vue2配置scss的方法步驟
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、在使用的地方如下寫法
<style lang="scss" scoped>
div {
a {
color: red
}
}
</style>
2、@import外部導(dǎo)入，如果不加scoped如果在app.vue中導(dǎo)入那么就是全局scss
<style lang="scss" scoped>
@import './assets/scss/global.scss';
* {
color: red
}
</style>
這樣寫下面的覆蓋外部引入的
注意遇到的坑
報(bào)錯(cuò)
/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時(shí)候,報(bào)錯(cuò),錯(cuò)誤如下.
查看node_modules文件夾,發(fā)現(xiàn),并無(wú)vender 文件夾.如下圖:
解決辦法:
上圖node-sass文件夾下,新建 vender 文件夾.然后運(yùn)行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夾,如下圖所示:
就可以了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng)的詳細(xì)代碼
這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng),在使用自定義指令之前，先對(duì)自定義指令有一定的了解，主要從自定義指令定義范圍，鉤子函數(shù)方面入手，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了修改Vue打包后的默認(rèn)文件名操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個(gè)使用?Vue.js?開(kāi)發(fā)所有前端應(yīng)用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡(jiǎn)單案例,需要的朋友可以參考下2023-03-03
使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時(shí)，無(wú)法作用影響到子組件中的樣式，此時(shí)我們會(huì)使用到deep深度選擇器，來(lái)解決此問(wèn)題，我們?cè)谑褂胠ess預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會(huì)報(bào)錯(cuò)，下面通過(guò)本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下2022-12-12
如何解決el-checkbox選中狀態(tài)更改問(wèn)題
這篇文章主要介紹了如何解決el-checkbox選中狀態(tài)更改問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
在vue2.0里面provide與inject是以選項(xiàng)式(配置)API的方式在組件中進(jìn)行使用的,解決的是跨組件(祖孫)間通信的一種方式，本文就來(lái)聊聊它們?cè)赩ue中具體的使用吧2023-03-03
一個(gè)基于vue3+ts+vite項(xiàng)目搭建初探
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開(kāi)發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了一個(gè)基于vue3+ts+vite項(xiàng)目搭建的相關(guān)資料,需要的朋友可以參考下2022-05-05
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
解決electron打包vue-element-admin項(xiàng)目頁(yè)面無(wú)法跳轉(zhuǎn)的問(wèn)題小結(jié)
這篇文章主要介紹了解決electron打包vue-element-admin項(xiàng)目頁(yè)面無(wú)法跳轉(zhuǎn)的問(wèn)題小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03