在react项目中引入less、antd 的使用

样式 less

1. 安装相关的预处理语言与加载器
   npm install less less-loader --save-dev
2. 修改配置文件 config/webpack.config.js 将sass相关全变成less
3. 改完配置文件后重启

样式作用域问题

默认引入的文件是全局 类名重复 混乱

1. 保证类名不重复 BEM 命名法 button-error-small button_sucess–big
   
   
   
   
2. 样式模块化
   import ‘./index.less’
   import { HEHE} from ‘./index.module.less’
3. css in js component-style

antd 的使用

1.下载引入
2.参考文档cv大法
全局引入

引入全部的样式文件 index.js 
import 'antd/dist/antd.css'
import {Button} from antd 

按需引入

下载安装 npm install   babel-plugin-import
修改webpack.config.js 找 babel-loader >plugins
babel-loader 
"plugins": [
   ....,
   ["import", {'libraryName':'antd',style:true}]
]
将less的版本回退到2.7.3 
将index.js 里的全局样式文件删除