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>