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

December 17, 2023
测试
测试
测试
测试
2 分钟阅读

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"
                )}";`,
            },
        },
    },
});

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多