问题提出
单个文件引入时,需要在每个 style lang="scss" scoped
标签下这样引入,每次都要手动引入非常麻烦,因此就想做全局配置
@import "@/assets/scss/global.scss"
解决方案
1、下载好sass 和 sass-loader
npm install sass --save-dev
npm install sass-loader --save-dev
2、在vite中配置
// vite.config.ts
export default defineConfig({
.......,
resolve: {
alias: {
'@': resolve('./src')
}
},
css: {
preprocessorOptions: {
scss: {
// 两种方式都可以
additionalData: '@import "@/assets/scss/global.scss";'
// additionalData: '@use "@/assets/scss/global.scss" as *;'
}
}
},
....
})
// global.scss
$font-color-gray:rgb(147,147,147);
3、在vue项目中使用
<script setup lang="ts"></script>
<template>
........
</template>
<style lang="scss" scoped>
.publish-info {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans',
sans-serif;
font-size: 12px;
line-height: 12px;
color: $font-color-gray; // 这里引入
}
</style>
注意事项
在main.js中不要再次引入global.scss文件,否则会报已经加载过的错误。