How to use sass in vue cli webpack (detailed tutorial)

This article mainly introduces the method of using sass in vue cli webpack. Friends who need it can refer to it

1: Install dependencies

npm install sass-loader node-sass --save-dev

2: Modify style in html

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

3: Use normal sass syntax

//但是会报错
<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: &#39;vue-loader&#39;,
 options: {
 loaders: {
  scss: &#39;vue-style-loader!css-loader!sass-loader&#39;, // <style lang="scss">
  sass: &#39;vue-style-loader!css-loader!sass-loader?indentedSyntax&#39; // <style lang="sass">
 }
 }
}

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

4: Reference sass/scss file

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Bus global event center in vue (detailed tutorial)

Detailed interpretation of change detection issues in the Angular series

Using vuex under vue-cli (detailed tutorial)

The above is the detailed content of How to use sass in vue cli webpack (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!