In the last article, Ant Design of React was created with create-react-app using Eject. The webPack configuration was exposed using Eject and antD was successfully introduced on demand. This article mainly focuses on solving the problem that less does not take effect after creation-react-app is created. Antd introduces less source files on demand, and encountered an error in bezierEasing. Less file. Antd local font configuration method; Less Uses the CSS Module configuration.

Directly introducinglessStyle not in effect

Create test.less and import it in app.js

.test {
  color: red;
}
Copy the code
// App.js
...
import './test.less'. <div className="test">test</div>
 <Button type="primary">Button</Button>
...
Copy the code

It is found that the test color does not take effect because create-react-app does not have a built-in less-loader

The installationless 和 less-loaderAnd modify the WebPack configuration

$ cnpm i less less-loader --save-dev
Copy the code

Modify webpack configuration modify webpack.config.dev.js and webpack.config-prod.js configuration files, add less configuration file:

// webpack.config.dev.js. {test: /\.less$/.use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,}}, {loader: require.resolve('less-loader') // compiles Less to CSS}],},...Copy the code

After restarting the project, the LESS style is in effect

antdUsing the style oflessImport in source file mode

Style is explained in babel-plugin-import:

["import", { "libraryName": "antd" }] : import js modularly

["import", { "libraryName": "antd", "style": true }] : import js and css modularly (LESS/Sass source files)

["import", { "libraryName": "antd", "style": "css" }] : import js and css modularly (css built files)

Modify package.json to change the style value to true

."babel": {
    "presets": [
      "react-app"]],"plugins": [["import", { "libraryName": "antd"."libraryDirectory": "es"."style": true}}]]...Copy the code

The.beziereasingMixin () method of the bezierEasingMixin() file failed to compile after restart:

View the issue address provided by the error message: issues/44

The reason is that less V3 deprecated Enable Inline JavaScript Option: lesscss.org/usage/#less…

There are two main solutions

  • Reduce the less version below 3.0
  • Less loader adds configuration to enable JavaScript:
// webpack.config.dev.js
...
  {
- loader: require.resolve('less-loader') // compiles Less to CSS
+ loader: require.resolve('less-loader'), // compiles Less to CSS
+ options: {
+ javascriptEnabled: true
+}
    
  }
Copy the code

Restart NPM start and the project can start normally.

antdUse the local font iconfont

Updated September 5, 2018. For the back-to-school season in September, the Ant Design collection has received a series of major updates. Umi came with version 2.0, followed by Ant Design Pro with version 2.0 built using UMI 2.0. One major update noted today in Ant Design’s 3.9.0 release is a refactoring of the Icon to use SVG instead of the CSS Font Icon. So if you’re using Ant Design older than 3.9.0, there’s no problem finding font files offline. If you are using Ant Design earlier than version 3.9.0, see below for offline iconFont.

The default iconfont file of Ant Design is hosted on iconfont. Cn and uses the alicDN address provided by the platform by default, which can be accessed by the public network.

Because alICDN has access restrictions on some domain names or requires Intranet use, you need to download fonts to the local PC

The latest iconfont file can be downloaded from this link.

After downloading, place the font file in the public/iconfont/ directory

Since the project is created using create-React-app and antD styles are loaded on demand using babel-plugin-import, the modifyVars configuration of less-Loader in the custom theme can only be used to override the original style variable.

Modify the webpack.config.dev.js and webpack.config-prod.js configuration files

// webpack.config.dev.js. {loader: require.resolve('less-loader'), // compiles Less to CSS
     options: {
        javascriptEnabled: true, modifyVars: {"icon-url": "'/public/iconfont/iconfont'"}}}Copy the code

Restart the project and successfully introduce local fonts

It should be noted that the icon-URL path in the webpack.config-prod.js file needs to be replaced with public as the path of the production environment project file. After packaging, files and folders in public are directly copied to the bulid path. Use relative path will report error cannot compile, this does not know whether there is a better way to deal with, hope readers provide a better way.

// webpack.config-prod.js. {loader: require.resolve('less-loader'), // compiles Less to CSS
     options: {
        javascriptEnabled: true, modifyVars: {"icon-url": "'/your-project-name/iconfont/iconfont'"}}}Copy the code

CSS Module less is introduced

Added the configuration of CSS-Loader

          {
            test: /\.less$/,
            // exclude: [/node_modules/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                   importLoaders: 1,
+ modules: true
                },
              },
              {
                loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                  modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"
                  }
                }
              }
            ],
          },
Copy the code

Modify app.js to use CSS Module to import

- import './test.less'
+ import styles from './test.less'

    class App extends Component {
      render() {
        return (
          <div className="App">
- 
      

       test
      

+ 
      

       test
      
<Button type="primary">Button</Button> </div> ); }}Copy the code

Restart the project. The TEST style introduced by the CSS Module is in effect, but the button style of ANTD is not

We need to change webpack.config.dev.js to enable CSS Module only for less files in SRC.

// webpack.config.dev.js. {test: /\.less$/.use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1}, {},loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true.modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"}}}],}, {test: /\.less$/.include: [/src/].use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1.modules: true},}],}...Copy the code

[2018-08-02] [2018-08-02] [2018-08-02] [2018-08-02] [2018-08-02] [2018-08-02] [2018-08-02] [2018-08-02] [2018-08-02] [2018-08-02] Still ask the brother that understands principle to help give directions, thank you

// webpack.config.dev.js. {test: /\.less$/.include: [/src/].use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1.modules: true},}],}, {test: /\.less$/.use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1}, {},loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true.modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"}}}],},...Copy the code

conclusion

In this paper, antD is introduced on the basis of eject create-react-app project on demand. Some problems related to LESS are encountered: the problem that less files do not take effect is solved, the configuration mode of local iconFONT is used in Intranet environment, and the configuration mode of CSS Module is used. This article also has some configuration mode is not the optimal way, hope you can give a better plan.

Here’s how you learned and stepped on React. The next article should be the use of DVA.

The resources

  • Github.com/ant-design/…
  • Antd custom themes
  • Add less configuration to create-react-app project
  • How to use ANTd +less+ CSS modules in React
  • [translation] react – CSS – modules