方法一:修改webpack.config.js中的配置
- 使用
npm run eject
将webpack的配置文件暴露,然后在其中添加相应的loader来处理.less文件,但是eject命令是不可逆的,所以不推荐这种方法
方法二: 使用第三方库
1.安装第三方库及处理less的库
npm install @craco/craco craco-less
2.在项目根目录下创建一个craco.config.js文件,并添加以下代码:
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
],
};
这将使用craco-less插件来处理.less文件,并将其转换为CSS。可以在React组件中使用.module.less文件,并且不需要暴露webpack配置文件。