Fork me on GitHub

create-react-app v3中配置按需加载组件和添加less支持修改主题样式

发表于 | 分类于 | 评论：

全局引用样式

当js引入ant-design的Button组件时，组件文件只会引用Button相关的，但样式文件会加载全部组件的

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

在APP.js中，要引入所有样式文件才会生效：

1
@import '~antd/dist/antd.css';

这样的话组件样式是会生效，但是明显很多组件样式没用到，这就无形中增大了文件体积，所以需要按需加载，只加载那些引用了的样式文件。

使用 babel-plugin-import 实现按需加载

引入babel-plugin-import

1
yarn add babel-plugin-import -D

然后修改pachage.json中的babel对象或者添加.babelrc配置文件，修改过后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
},

这样就可以像下面这样在组件中愉快地按需加载ant的组件文件和样式了

1
import { Button } from 'antd'

这里需要特别说明的配置项是style,默认为css，即加载时ant组件编译过后的css文件，如果为true,则是加载组件的less文件，如果我们需要修改antd一些主题样式的全局变量，就可以设为true`。

引入less-loader修改主题样式

  1. 首先得引入less和less-loader，因为ant的的样式是用less写的

    1
    yarn add less less-loader -D

  2. 将上面plugins中的style设为true

  3. 在webpack.config.js中加入less-loader配置，找到module对象，添加代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//antd less 文件编译
{
  test: /\.less$/,
  include: [/node_modules/],
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader', // translates CSS into CommonJS
  }, {
    loader: 'less-loader', // compiles Less to CSS
    options: {
      modifyVars: {
        'primary-color': '#1fb5ab',
        'link-color': '#1fb5ab',
        'border-radius-base': '2px',
      },
      javascriptEnabled: true,
    },
  }],
},

配置项中modifyVars中的就是要修改的less全局变量信息，想看更多查询官方文档

关于引入less-loader之后编译时报Unrecognised input的问题

image

这个我查询了一些资料，发现大家的报错原因和我的不太一样，最后和同事讨论之后定位问题是因为less-loader引入位置问题，汗！

由于create-react-appv3是集成的webpack4.x,很多配置项都集成到了一起，而不是像之前版本那样会暴露一个webpack.config.dev.js和webpack.config.prod.js了。在新的脚手架中我们只要修改webpack.config.js中的loader配置。并且一定要在oneOF数组中添加上面的配置：（我之所以编译报Unrecognised input问题就是直接在rules中添加less-loader配置结果匹配到了file-loader导致的）

image

参考