vue中引入sass、scss

常规步骤

1. 创建项目

使用vue cli 脚手架工具创建项目

vue create xxxx

2. 创建全局样式文件

全局样式变量
路径：@/assets/styles/variables.scss

//flex 布局变量
$--flex-direction: ("row", "column");
$--flex-position: ("start", "center", "end");

布局样式类
路径：@/assets/styles/layout.scss


@each $direction in $--flex-direction {.flex-#{$direction} {display: flex;flex-direction: #{$direction};}@each $p1 in $--flex-position {@each $p2 in $--flex-position {.flex-#{$direction}-#{$p1}-#{$p2} {display: flex;flex-direction: #{$direction};@if $p1!=center {justify-content: flex-#{$p1};} @else {justify-content: #{$p1};}@if $p2!=center {align-items: flex-#{$p2};} @else {align-items: #{$p2};}}}}
}

3. 创建全局公用样式文件

全局共用样式
路径：@/assets/styles/main.scss

@import "@/assets/styles/layout.scss";div {@extend .flex-row;
}

4. 引入全局公用样式

在App.vue或者main.js中映入均可

<template><router-view />
</template><style lang="scss">
@import "@/assets/styles/main.scss";body {margin: 0;padding: 0;border: none;outline: none;
}
#app {position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-family: 微软雅黑;color: #000000;
}
</style>

5. 配置全局样式类文件

在vue.config.js中配置全局样式类，具体配置方法可以参考vue cli官方文档

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({transpileDependencies: true,css: {loaderOptions: {scss: {additionalData: `@import "~@/assets/styles/variables.scss","~@/assets/styles/layout.scss";`}}}
});

FAQ

1. 样式被多次重复编译

在这里插入图片描述

原因

产生的原因主要是因为在SCSS样式文件中引入了在vue.config.js中配置的样式文件，导致样式类被多次重复编译
vue.config.js是vue编译的入口文件，所以vue在编译时会先加载vue.config.js内配置的SCSS文件,而scss-loader在编译了前置样式文件后会将已经编译的全局样式变量、样式类、带入到后续scss文件的编译中

解决方法

去掉样式类文件中引入的其他样式文件

例如以下代码，在main.scss中引入了layout.scss文件，而layout.scss文件已经在vue.config.js中配置了载入，所以这里无需再引入

@import "@/assets/styles/layout.scss";div {@extend .flex-row;
}

在vue.config.js中只配置工具性样式文件，如果全局变量文件、全局样式类文件；不要引入非工具性样式文件，例如全局组件样式、main.scss等。所以同理在App.vue文件中只引入非工具性样式文件，因为如果在App.vue文件中引入工具性样式文件是~~不生效的~~，因为vue项目中，只有在vue.config.js中配置的样式文件，才会被编译到每个vue组件样式内

如以下代码，同样会产生多次重复编译

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({transpileDependencies: true,css: {loaderOptions: {scss: {additionalData: `@import "~@/assets/styles/main.scss";`}}}
});

2. 样式类、变量名找不到

在这里插入图片描述

原因

scss-loader在编译scss时，是根据从上到下，从前到后的顺序编译，如果文件内的类名不在scss-loader的堆栈内时，就会抛出以上错误

解决方法

如果存在样式类或变量名不存在的问题时，需要检查引入scss文件的顺序是否正确

例如如下代码：当variables.scss文件位于layout.scss文件后时，在编译layout.scss时就会抛出变量不存在错误，因为此时scss-loader的堆栈中没有对应的变量

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({transpileDependencies: true,css: {loaderOptions: {scss: {additionalData: `@import "~@/assets/styles/layout.scss","~@/assets/styles/variables.scss";`}}}
});