在react中識別less
less是什么
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護、方便制作主題、擴充。Less 可以運行在 Node 或瀏覽器端。
前言
在facebook官方給出的腳手架中，并不能識別less文件，而我們在使用antd或其他ui框架的時候，使用less會帶來很多便捷。最最最糟糕的是: react在不久前進行了一波更新。導致react的配置文件發(fā)生了改變，網上的教程都不能使用了。在查找了資料之后我找到了完美的解決方案。
正文
廢話不說，咱們進入正題
第一步
首先我們要使用 react 官方的腳手架新建一個項目并釋放出它的配置文件
//新建一個叫l(wèi)ess 的項目
create-react-app less
//釋放出配置文件
yarn eject
特殊說明：
一定要在項目搭建完成之后立刻執(zhí)行yarn eject
在項目中加入任何文件或者使用webstorm打開都會導致報錯
第二步
下載less和less-loader，這是項目能夠識別less文件的關鍵。
//下載less和less-loader
yarn add less less-loader
第三步
在釋放出配置文件之后，在項目里面就多出了一個叫做config的文件夾，現(xiàn)在我們需要修改里面的webpack.config.js文件
首先找到第38行，加入less
//改之前
const cssRegex = /\.css$/;
//改之后
const cssRegex = /\.(css|less)$/;
在use數(shù)組最后新增一個對象元素{loader: require.resolve('less-loader')}
添加位置：在103行逗號的后面
//在103行的逗號后面添加
{
loader : require.resolve('less-loader')
}
第四步
現(xiàn)在重新啟動項目，就會發(fā)現(xiàn)現(xiàn)在已經能夠識別less文件啦！
