vue-cli webpack 使用sass

1：安裝依賴

2：html中 修改style

<style lang="sass">
  /* write sass here */
</style>
           

3: 使用正常sass 文法

//但是會報錯
<style lang="sass">
   $highlight-color: #F90;
  $highlight-border: px solid $highlight-color;
  .selected {
    border: $highlight-border
  }
  // 解決方案一  記得屬相前面一定是兩個空格
<style lang="sass">
   $highlight-color: #F90
   $highlight-border: px solid $highlight-color
   .selected 
     border: $highlight-border
</style>
// 解決方案二 sass 修改為 scss
<style lang="scss">
   $highlight-color: #F90;
   $highlight-border: px 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 >
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style >
    }
  }
}
           

連結:https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html
           

4：引用sass/scss 檔案

@import  "./common/scss/mixin";