react项目集成less

  • 添加相关依赖
yarn add less less-loader -D
  • 暴露react项目的相关配置
yarn eject
  • 找到 Webpack的配置文件, 添加 less 解析器 less-loader
{
    loader: require.resolve('less-loader'),
},
  • 最后编写测试用例, 使用 less 文件编写样式, 测试成功!

react项目集成antd

  • 添加依赖文件
yarn add antd
  • 设置按需加载

    • 安装依赖
    yarn add babel-plugin-import
    • package.json 文件末尾的 babel 节点下添加, 官网提供的代码
    "plugins": [
        ["import", {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }]
      ]
`注意:` package.json 不能出现任何注释;
- 此时配置完成,可以正常使用了,但会出现一些警告信息 

clipboard.png

`暂时不知道如何解决`

- 当你想要加载 antd 中的 less 文件时,即将 style 的值改为 true 时, 重新启动项目会出现错误:编译失败

clipboard.png

解决方法:

此时需要在你配置less-loader的地方, 添加一个 options 项,即修改为以下内容


```javascript
{
    loader: require.resolve('less-loader'),
    options: {
      javascriptEnabled: true,
    }
},
```

之后重新启动项目即可;
所有修改Webpack配置文件的操作, 必须重启项目, 否则可能无法生效

本文固定链接: http://www.js-code.com/react/react_43376.html