如何添加加载器(less-loader)到vite.js (vite.config.js)?

Question

我开始使用Vite.js，我想在我的项目中使用更少的文件，我没有找到一个明确的解决方案来添加加载器，特别是更少的加载器，因为我使用Ant Design v4。

我用了:

import react from '@vitejs/plugin-react';
export default {
plugins: [react()],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
};

但它不工作，我试了:

import react from '@vitejs/plugin-react';
export default {
plugins: [
{
name: 'less',
transform(code, id) {
if (id.endsWith('.less')) {
return require('less').renderSync({ data: code }).css;
}
},
},
],
css: {
modules: {
localsConvention: 'camelCaseOnly',
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
};

没有工作，我问chatGPT，但它给了我随机的解决方案，没有工作，任何解决方案或文章来学习如何配置加载器在vite.js ?

Answer 1

我不知道你面临的问题是什么，但我尝试了这些步骤，它对我来说很好。

1. 在工程中安装less

2. 我添加了math,relativeUrls和javascriptEnabled在vite配置的支持

css: {
preprocessorOptions: {
less: {
math: "always",
relativeUrls: true,
javascriptEnabled: true
},
},
}

这是我的vite+reactjs+antd+less基本设置的代码沙盒链接

https://codesandbox.io/p/github/abhinavRai23/Vite-react-ant-design/main

Answer 2

我遇到了一个使用第二个样式依赖的问题，它使用的是。less文件。

No loader is configured for ".less" files: node_modules/second-dependency-style/src/button-style.less
node_modules/first-dependency/lib/button.js:
require("second-dependency-style");

对不起，我不能给出依赖项的名称。这是一个旧的内部依赖。