全局引入scss

main.js 只能import css文件 scss文件不能直接import

步骤一：下载node-sass sass-loader

npm i -D [email protected]
npm i [email protected]
           

步骤二：配置 vue.config.js 文件

// css相关配置
  css: {
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";` //引入全局变量   
      }
    }
  }
           

由于sass-loader的版本不同，这里可能会报错，不同的版本对应的关键字不一样：

sass-loader v8-中，关键字为 “ data ”

sass-loader v8中，关键字为 “ prependData ”

sass-loader v10+中，关键字为 “ additionalData ”

Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

如：

@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}
           

在文件中我们可以这样使用

div {
    width: 100px;
    height: 100px;
    @include center;
}
则会被编译成
div {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}