当前位置: 首页 > article >正文

在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件

在开发时每次使用公共的 less 变量和类名,都要单独导入一下。当文件过多时,会让代码特别的冗余,设置自动导入后会方便很多。

正常使用:

<style scoped lang="less">
// 引入 less 文件
@import '@/styles/mixins.less';
@import '@/styles/variables.less';

.box {
  background-color: @xtxColor;
}

// 使用混合宏
.hover-item {
  .hoverShadow();
}
</style>

如何才能让 less变量和文件自动导入项目中呢?

  • 找到 vite.config.ts 文件夹进行配置

在这里插入图片描述

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `
        @import '@/styles/mixins.less';
        @import '@/styles/variables.less';
        ...要自动导入的less文件路径
        `,
      },
    },
  },
});

注意:如果设置之后,不能用,重新启动一些项目即可。

设置之后使用:

<style scoped lang="less">
.box {
  background-color: @xtxColor;
}

// 使用混合宏
.hover-item {
  .hoverShadow();
}
</style>

http://www.kler.cn/a/371347.html

相关文章:

  • Ubuntu UFW防火墙规则与命令示例大全
  • 基于uniapp微信小程序的校园二手书交易系统
  • Apache POI—读写Office格式文件
  • vue使用prototype
  • 详解PHP正则表达式中的转义操作
  • NOIP-2022 题解
  • macOS开发环境配置与应用开发教程
  • java 泛型返回接口
  • vue使用rem适配各种分辨率设备
  • 【PTA】4-2 树的同构【数据结构】
  • 鸿蒙的底部菜单导航实现
  • appium自动化对已打开的app操作
  • pdf转为txt文本格式并使用base64加密输出数据
  • 事务的原理、MVCC的原理
  • Pytest的测试用例相关问题总结
  • Linux下安装软件
  • 江协科技STM32学习- P22 实验-ADC单通道/ADC多通道
  • 交叉编译 lmbench(riscv64)
  • synchronized进阶原理
  • Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)
  • 中国分省统计面板数据(2004-2023)-最新出炉_附下载链接
  • JavaEE初阶------网络编程续+传输层UDP协议介绍
  • Educational Codeforces Round 171 (Rated for Div. 2) A~E
  • 【Linux】动静态库:构建强大软件生态的基石
  • 张量分析与连续介质力学
  • 【vue】07.自定义指令