zl程序教程

您现在的位置是:首页 >  Javascript

当前栏目

vite中导入基础样式文件,以供在全局下直接使用全局 less 变量

2023-03-07 09:42:53 时间

vite中导入基础样式文件,以供在全局下直接使用全局 less 变量,否则会报错 undefined

  1. 先新建 base.less 文件,定义基础样式变量
  2. 在 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"
                )}";`,
            },
        },
    },
});