为免去手动导入样式文件的繁琐,可以做一些配置省去很多麻烦。
编写定制化样式文件
在项目文件夹中styles文件夹下新建var.scss文件,编写样式,实例如下:
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor:#cf4444;
配置自动导入
打开vite.config.js文件,做如下配置后,项目在启动时会自动导入对应的文件。
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
//实际的路径转换 @ ->src
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
//自动导入定制化样式文件进行样式覆盖
additionalData: `
@use "@/styles/element/index.scss" as *;
@use "@/styles/var.scss" as *;
`
}
}
}
})
测试
在app.vue中新增一个class=test的div,设置background-color为$priceColor:#cf4444;
运行结果为:
测试成功!