欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue cli webpack中使用sass的方法

 更新時間：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 語法

//但是會報錯
<style lang="sass">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
 border: $highlight-border
 }
 // 解決方案一 記得屬相前面一定是兩個空格
<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 的選項
{
 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";

總結

以上所述是小編給大家介紹的vue cli webpack中使用sass的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

相關文章

  • 詳解Vue-Router源碼分析路由實現(xiàn)原理

    詳解Vue-Router源碼分析路由實現(xiàn)原理

    這篇文章主要介紹了Vue-Router源碼分析路由實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • vue封裝一個右鍵菜單組件詳解(復制粘貼即可使用)

    vue封裝一個右鍵菜單組件詳解(復制粘貼即可使用)

    關于vue項目中會出現(xiàn)一些需求,就是右鍵菜單項的功能實現(xiàn),下面這篇文章主要給大家介紹了關于vue封裝一個右鍵菜單組件(復制粘貼即可使用)的相關資料,需要的朋友可以參考下
    2022-12-12
  • vue3?中ref和reactive的區(qū)別講解

    vue3?中ref和reactive的區(qū)別講解

    如果在template里使用的是ref類型的數(shù)據,?那么Vue會自動幫我們添加.value，如果在template里使用的是reactive類型的數(shù)據,?那么Vue不會自動幫我們添加.value，這篇文章主要介紹了vue3?中ref和reactive的區(qū)別,需要的朋友可以參考下
    2022-12-12
  • vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例

    vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例

    這篇文章主要給大家介紹了關于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關資料,Filter-method用法是指從一組數(shù)據中選擇滿足條件的項,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • vuex實現(xiàn)購物車功能

    vuex實現(xiàn)購物車功能

    這篇文章主要為大家詳細介紹了vuex實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06
  • vue+elementUI中表格高亮或字體顏色改變操作

    vue+elementUI中表格高亮或字體顏色改變操作

    這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue實現(xiàn)tab路由切換組件的方法實例

    vue實現(xiàn)tab路由切換組件的方法實例

    這篇文章主要給大家介紹了關于vue實現(xiàn)tab路由切換組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • Vue.js中使用components組件的實例講解

    Vue.js中使用components組件的實例講解

    這篇文章主要介紹了Vue.js中使用components組件的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • vue3無法使用jsx的問題及解決

    vue3無法使用jsx的問題及解決

    這篇文章主要介紹了vue3無法使用jsx的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • vue中異步函數(shù)async和await的用法說明

    vue中異步函數(shù)async和await的用法說明

    這篇文章主要介紹了vue中異步函數(shù)async和await的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04

最新評論