Based create-react-app scaffolding, components and less demand loading antd style

Summary

　　In order to better writing css styles, introduced react in less, check online a lot of information on the introduction of less react style files, most of them need to expose the underlying file npm run eject react in the project and in the underlying file modify the environment configuration dev-env. After consulted with chiefs know they can be less according to the official website of the document antd Advanced Configuration to customize the configuration of default by the react-app-rewired, new @ 2.x version also need to download the customize-cra . So that we can create a configuration file in the root directory of the project to modify the default configuration. Details can refer to the official website of the antd advanced configuration documentation .

Environmental dependent

　　1. Download installation configuration, dependency :

Loader-less less the install NPM --save   // install less, less-loader dependent
 NPM-App-REACT rewired the install-CRA --save Customize   // custom installation configuration related dependencies
 npm babel-plugin-import --save   // install the plug-demand loading of babel

　　2. Modify the start of the project to modify the configuration package.json :( "scripts" in the startup configuration to react-app-rewired)

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

　　3. Create a root directory config-overrides.js modify the default configuration:

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

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
    }),
);

　　4.npm start to restart the project .

Project Test

　　1.App.js code block:


        <Tag Color = '# 108ee9'> the Hello! React </ Tag> 
        <Tag Color = '# faad14'> warning you not to do something, ah, little brother! </ Tag>


      </div>
    </div>
  )
}

export default App;

　　2.App.less style code blocks:

/ * {App assembly less style *} / 
.box { 
  width: 100vw; 
  height: 30vh; 
  background: Wheat; 
  .unity (); 
  Flex-direction: column; 
  .home { 
    margin: 20px; 
  } 
} 

/ * {Home assembly * less style} / 
.box-items { 
  width: 30vw; 
  height: 10vh; 
  background: Pink; 
  .unity (); 
} 

/ * pass a less pattern {*} / 
.unity { 
  the display: Flex; 
  The justify-Content: Center ; 
  align = left-items: Center; 
}

　　3. Run the result :( introduced less successful style file)

to sum up

　　less.js让css的写法更加的灵活且更趋近于html的方式书写样式，为了在react项目中引入less，参考了antd的高级配置引入了我们项目中所需要的less样式，这个方法简化了配置less的操作，同时也避免了eject暴露底层文件。基于个人在开发过程中的经历，故此分享一下这个引入less的方式。antd官网还有另一种比较类似的方式引入less，在此就不多复述，如大家有更好更灵活的方式，可以一起探讨学习。

Based create-react-app scaffolding, components and less demand loading antd style

Guess you like