vue3-ts+vite项目里组件中如何读取全局SASS变量?

346 阅读1分钟

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变量了。