Methods of using sass in vue cli webpack

1: Installation 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

//But there will be an error&lt;style lang="sass"&gt;
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
 border: $highlight-border
 }
 // Solution 1 Remember that there must be two spaces in front of the zodiac&lt;style lang="sass"&gt;
 $highlight-color: #F90
 $highlight-border: 1px solid $highlight-color
 .selected 
  border: $highlight-border
&lt;/style&gt;
// Solution 2 sass is modified to scss&lt;style lang="scss"&gt;
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
  border: $highlight-border
 }
&lt;/style&gt;
// Official solution You need to configure the option of vue-loader{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
  scss: 'vue-style-loader!css-loader!sass-loader', // &lt;style lang="scss"&gt;
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // &lt;style lang="sass"&gt;
 }
 }
}

Link:/zh-cn/configurations/

4: Quoting the sass/scss file

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

Summarize

The above is the method of using sass in vue cli webpack introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!