React 引入less

react 安装less

1.安装less 和less-loader

	npm i less@3.9.0 --save
	npm i less-loader@4.1.0 --save

2.暴露webpack.config.js

	npm run eject
	出现报错（Remove untracked files, stash or commit any changes, and try again.）执行下面命令
	git init
	git add .
	git commit -m 'up'

3.配置less 两种配置，使用方式不一样

1. 方式一

	在webpack.config.js里 搜索 oneOf 。在数组中添加
	 {
       test: /\.less$/,
       use: [{
         loader: 'style-loader',
       }, {
         loader: 'css-loader', // translates CSS into CommonJS
       }, {
         loader: 'less-loader', // compiles Less to CSS
         options: {
           modifyVars: {
             'primary-color': '#f9c700',
             'link-color': '#1DA57A',
             'border-radius-base': '2px',
           },
           javascriptEnabled: true,
         }
       }]
     },

使用方式

	引入
	import './style.less'
	使用
	class App extends React.Component {
	  render() {
	    return (
	      <div>
	        <span></span>
	        <div className='clickButtom'>
	          <button>增加</button>
	          <button>减少</button>
	          <button>重置</button>
	        </div>
	      </div>
	    )
	  }
	}

2. 方式二

	在webpack.config.js 搜索 style files regexes 。 添加
	const lessRegex = /\.less$/;
	const lessModuleRegex = /\.module\.less$/;
	
	搜索（"file" loader makes sure those assets get served by WebpackDevServer.）在500行左右
	 {
       test: lessRegex,
         exclude: lessModuleRegex,
         use: getStyleLoaders({
           importLoaders: 1,
           modules: true,
           sourceMap: isEnvProduction && shouldUseSourceMap
         },
           "less-loader"
         ),
         sideEffects: true
       },
       {
         test: lessModuleRegex,
         use: getStyleLoaders({
           importLoaders: 1,
           sourceMap: isEnvProduction && shouldUseSourceMap,
           modules: true,
           getLocalIdent: getCSSModuleLocalIdent
         },
           "less-loader"
         )
       },

**使用方式**

引入
	import lessStyle from './style.less'
使用
	function App() {
	  return (
	    <div>
	      <span></span>
	      <div className={lessStyle.clickButtom}>
	        <button>增加</button>
	        <button>减少</button>
	        <button>重置</button>
	      </div>
	    </div>
	  )
	}