react创建后不支持less,需要配置wabpack支持less-loader。
补充:react项目创建js 或者jsx项目,点击可见
一:安装:less 和 less-loader(任选一种)
npm方式:
npm install less less-loader --save
cnpm方式:
cnpm install less less-loader --save
yarn方式:
yarn add less less-loader
二:暴露项目配置项(任选一种)
注意:此步骤不可逆 ,最好备份下项目再进行。
若报错,有git的可以通过
git add .
git commit -m '暴露项目配置项'
npm run eject
npm方式:
npm run eject
cnpm方式:
cnpm run eject
yarn方式:
yarn eject
三:配置webpack.config.js
文件:config / webpack.config.js,
修改前:
修改后:
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;
修改前:
修改后:
{
loader: require.resolve('less-loader'),
options: lessOptions,
},
四:配置完成,重启项目即可
备注:webpack v4版本 eject暴露后位置不一样,大同小异