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