javascript 如何在vite.js(vite.config.js)中添加loader(less-loader)?

mklgxw1f  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(542)

我开始使用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,但它给了我随机的解决方案和nones工作,任何解决方案或文章,以了解如何配置加载器在vite.js?

ygya80vv

ygya80vv1#

我不知道你面临的问题是什么,但我尝试了这些步骤,对我来说效果很好。
1.已在项目中安装less
1.我在vite config中添加了对mathrelativeUrls沿着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

相关问题