scss全局变量配置
今天想在项目中,使用一个全局生效的自定义scss变量。$horizontal-min-width: 1303px;
看看整个项目的scss引入,创建了一个main.scss文件,然后在main.js中导入了
import './assets/main.scss'
main.scss内容:
- 清除浏览器默认样式
- 添加一些全局样式
- 自定义一些样式,可在后文直接通过添加类名使用
失败
想直接在此定义变量,$horizontal-min-width: 1303px;
报错:[plugin:vite:css] [sass] Undefined variable.
然后我又尝试去App.vue中引入
<style scoped lang="scss">
@import '@/assets/main.scss';
</style>
还是报错
初步成功
直接引入该文件到app.vue或者main.js是不生效的,我们需要将其引入到每一个组件的scss中去,手动引入也可以实现。
【每次使用都需要引入,太麻烦,想一处定义,一处引入,多处使用】
最终方案
这里我们采用vue相关的配置自动引入。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default () => {
return defineConfig({
plugins: [
vue(),
],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/var.scss";' // 加载全局样式,使用scss特性
}
},
}
})
}
亲测可行