vue cli webpack中使用sass的方法
更新時(shí)間：2018年02月24日 10:49:19 作者：愛lv行
這篇文章主要介紹了vue cli webpack中使用sass的方法,需要的朋友可以參考下
1：安裝依賴
npm install sass-loader node-sass --save-dev
2：html中 修改style
<style lang="sass"> /* write sass here */ </style>
3: 使用正常sass 語法
//但是會報(bào)錯(cuò)
<style lang="sass">
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border
}
// 解決方案一 記得屬相前面一定是兩個(gè)空格
<style lang="sass">
$highlight-color: #F90
$highlight-border: 1px solid $highlight-color
.selected
border: $highlight-border
</style>
// 解決方案二 sass 修改為 scss
<style lang="scss">
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border
}
</style>
// 官方解決方案 你需要配置 vue-loader 的選項(xiàng)
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
}
鏈接: https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html
4：引用sass/scss 文件
@import "./common/scss/mixin";
總結(jié)
以上所述是小編給大家介紹的vue cli webpack中使用sass的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue隱藏路由的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍
后臺項(xiàng)目想使用時(shí)間選擇器選擇一段時(shí)間進(jìn)行數(shù)據(jù)篩選,所以下面這篇文章主要給大家介紹了關(guān)于Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
有很多關(guān)于vue的todolist小程序，這篇文章主要介紹了 用vue寫todolist單頁應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
關(guān)于axios配置請求頭content-type實(shí)例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue多選列表組件深入詳解，這個(gè)是vue的基本組件，有需要的同學(xué)可以研究下2021-03-03
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03
這篇文章主要介紹了聊聊Vue.js的template編譯的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue3打包部署報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
Vite在默認(rèn)配置下會將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧2024-09-09
vue長列表優(yōu)化之虛擬列表實(shí)現(xiàn)過程詳解
前端的業(yè)務(wù)開發(fā)中會遇到不使用分頁方式來加載長列表的需求,下面這篇文章主要給大家介紹了關(guān)于vue長列表優(yōu)化之虛擬列表實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08