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 語法
//但是會(huì)報(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的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解Vue-Router源碼分析路由實(shí)現(xiàn)原理
這篇文章主要介紹了Vue-Router源碼分析路由實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)
關(guān)于vue項(xiàng)目中會(huì)出現(xiàn)一些需求,就是右鍵菜單項(xiàng)的功能實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個(gè)右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下2022-12-12
如果在template里使用的是ref類型的數(shù)據(jù),?那么Vue會(huì)自動(dòng)幫我們添加.value，如果在template里使用的是reactive類型的數(shù)據(jù),?那么Vue不會(huì)自動(dòng)幫我們添加.value，這篇文章主要介紹了vue3?中ref和reactive的區(qū)別,需要的朋友可以參考下2022-12-12
vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關(guān)資料,Filter-method用法是指從一組數(shù)據(jù)中選擇滿足條件的項(xiàng),文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue實(shí)現(xiàn)tab路由切換組件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)tab路由切換組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vue.js中使用components組件的實(shí)例講解
這篇文章主要介紹了Vue.js中使用components組件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue3無法使用jsx的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中異步函數(shù)async和await的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04