vite中导入基础样式文件,以供在全局下直接使用全局 less 变量,否则会报错 undefined
- 先新建 base.less 文件,定义基础样式变量
- 在 vite.config.ts 下 添加配置
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
vue(),
],
resolve: {
alias: {
"@": resolve(__dirname, "./src"), //把 src 的别名设置为 @
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `@import "${resolve(
__dirname,
"src/assets/styles/base.less"
)}";`,
},
},
},
});