关于在react中使用less的操作
1.原理：
由于使用create-react-app来创建的项目并未暴露webpack文件，而less操作需要webpack.config.dev.js和webpack.config.prod.js的配置，因此首先需要暴露出两个文件，
操作步骤：①npm run eject ②引入less依赖：npm install less less-loader --save-dev
2.配置webpack文件,修改webpack.config.js如下：
① 加入以下两个引用：
//less
const lessRegex = /.(less|less)$/;
const lessModuleRegex = /.module.(less|less)$/;
②在module下加入代码：
具体如下：
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as its not a standard language feature.
{ parser: { requireEnsure: false } },
...省略
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
less-loader
),
// Dont consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
less-loader
),
},
...省略
]
}
