前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vite中导入基础样式文件,以供在全局下直接使用全局 less 变量

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

作者头像
蓓蕾心晴
发布2023-02-17 13:34:25
2.5K0
发布2023-02-17 13:34:25
举报
文章被收录于专栏:前端小叙

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

  1. 先新建 base.less 文件,定义基础样式变量
  2. 在 vite.config.ts 下 添加配置
代码语言:javascript
复制
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"
                )}";`,
            },
        },
    },
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vite中导入基础样式文件,以供在全局下直接使用全局 less 变量,否则会报错 undefined
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档