vite构建的vue3项目中使用less

KAGHQ

已于 2022-11-24 11:24:24 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue3 文章标签： less 前端 javascript

于 2022-11-24 11:20:27 首次发布

原文链接：https://blog.youkuaiyun.com/weixin_43575792/article/details/122841064

vue3 专栏收录该内容

21 篇文章

订阅专栏

在尝试安装`npminstallless`和`npminstallless-loader`时遇到错误，提示需要安装`webpack@^5.0.0`作为peer dependency。安装`webpack@^5.0.0`后，更新`vite.config.ts`中的css配置，添加了`less`的预处理器选项，包括禁止charset和导入全局less文件。现在问题已解决，配置文件正确，可以正常使用less进行前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install less
npm install less-loader

报错
less-loader@11.1.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
安装

npm install webpack@^5.0.0

文件vite.config.ts配置

在这里插入图片描述

css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/style/global.less";',
      },
    },
  }