How to use sass in vue cli webpack (detailed tutorial)-JS Tutorial-php.cn

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

亚连

Release： 2018-06-04 16:54:19

Original

2289 people have browsed it

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

Copy after login

2: Modify style in html

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

Copy after login

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">
 }
 }
}

Copy after login

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

4: Reference sass/scss file

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

Copy after login

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

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!