vite.js（vite.config.js）如何添加loader（less-loader）？

Question

我开始使用 Vite.js 并且我想在我的项目中使用更少的文件，我没有找到一个明确的解决方案来添加加载器，尤其是 less-loader 因为我使用的是 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. 我在 vite 配置中添加了对

   math

   、

   relativeUrls

   和

   javascriptEnabled

   的支持

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

这是我的基本设置的代码沙箱链接

vite+reactjs+antd+less

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