Comment utiliser sass dans vue cli webpack (tutoriel détaillé)

Cet article présente principalement la méthode d'utilisation de sass dans vue cli webpack. Les amis qui en ont besoin peuvent s'y référer

1 : Installer les dépendances

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

2 : Modifier le style en HTML

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

3 : Utiliser la syntaxe Sass normale

//但是会报错
<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">
 }
 }
}

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

4 : Citation fichier sass /scss

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Centre d'événements global Bus en vue (tutoriel détaillé)

Interprétation détaillée des problèmes de détection de changement dans la série Angular

Utiliser vuex sous vue-cli (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!