项目添加less支持；以及解决less支持过程中报错问题

最新推荐文章于 2024-08-08 14:27:26 发布

Smileyqp沛沛

最新推荐文章于 2024-08-08 14:27:26 发布

阅读量1k

点赞数

文章标签： react less less-loader raect添加less支持前端

本文链接：https://blog.csdn.net/qq_34273059/article/details/112534563

版权

安装相关依赖

   cnpm install --save-dev less less-loader react-app-rewrite

修改 package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。


const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const theme = require('./theme.json');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: theme
  }),
);

theme.json

{
 "@primary-color": "#8987FF"
}

完成之后重启，引入less样式文件到组件页面之中，出现以下报错
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

Module build failed (from ./node_modules/less-loader/dist/cjs.js):
ValidationError: Invalid options object. Less Loader has been initialised using
an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImpo
rter? }
    at validate 
    at Object.loader

出现以上报错问题其实是less-loader的版本兼容性问题，只要更换less-loader版本即可，我这边将less-loader的版本降低到5.0.0之后重启，刚刚报错问题解决cnpm i less-loader@5.0.0