在VueCli3創(chuàng)建的項(xiàng)目里使用SCSS全局變量
1. 準(zhǔn)備存放全局樣式變量的文件
global-variable.scss，內(nèi)容如下：
$theme-color: #3385ff;
2. 配置loader
打開根目錄下 vue.config.js
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/styles/_variable.scss";`
}
}
}
}
3. 使用全局變量
現(xiàn)在就可以在每個(gè)vue文件中直接使用全局變量了
<template>
<div>
</div>
</template>
<script>
exprot default {
}
</script>
<style lang="scss" scoped>
button{
color: $theme-color;
}
</style>
