vue3-ts+vite项目里组件中如何读取全局SASS变量?
今天写代码遇到一个问题, 在组件中使用全局的scss文件中的变量,代码编译会报错。
解决方案
在 vite.config.ts 中添加css配置
// vite.config.ts
import {defineConfig} from 'vite'
// ...
export default defineConfig({
// ...
// 公共样式文件 那两个都加进去
css: {
preprocessorOptions: {
scss: {
additionalData:
'@import "./src/styles/base.scss";@import "./src/styles/ui.scss";'
}
}
}
})
这样就可以在组件中使用scss变量了。