vue中全局使用scss的变量和mixin

1、在项目中安装style-resources-loader和vue-cli-plugin-style-resources-loader插件

yarn add style-resources-loader --dev

yarn add vue-cli-plugin-style-resources-loader --dev

2、准备variables.scss和mixin.scss文件

// variables.scss文件

$white1: #fff;
$white2: rgba(255, 255, 255, 0.7);
$green: #02a6b5;
$yellow: #ffeb7b;
$border1: 1px solid rgba(25, 186, 139, 0.17);
$border2: 2px solid $green;

// The :export directive is the magic sauce for webpack
// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
:export {
  green: $green;
}

// mixin.scss文件
@mixin border-around {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
}

3、在项目的vue.config.js中配置style-resources-loader插件

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        // 路径根据具体需求更改
        path.resolve(__dirname, 'src/styles/variables.scss'),
        path.resolve(__dirname, 'src/styles/mixin.scss')
      ]
    }
  }
}

4、在vue单文件中使用scss变量

<template></template>

<script>
import { defineComponent } from 'vue'
import variables from '@/styles/variables.scss'
export default defineComponent({
  setup() {
    const $green = variables.green 
  }
})
</script>

<style lang="scss" scoped>
.box {
  color: $green;
  @include border-around;
}
</style>