描述

创建步骤和官网一致，大家可以查看官网，下面简单列举下.

创建项目

npx create-react-app my-app

cd my-app/

eject出配置文件

npm run eject
或者
yarn eject

安装 less

less 和 less-loader 都要安装。less 是支持 less 语法的，less-loader 是 webpack 使用来编译 less 的。

npm install less less-loader --save

配置 webpack.config.js

修改config/webpack.config.js

新增 less 配置变量

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/; // 新增less配置
const lessModuleRegex = /\.module\.less$/; // 新增less配置，这个其实不配置也行

增加 module 下面 rule 规则，可以 copy cssRegex或者sassRegex的配置。

{
	test: sassModuleRegex,
	use: getStyleLoaders({
			importLoaders: 2,
			sourceMap: isEnvProduction && shouldUseSourceMap,
			modules: true,
			getLocalIdent: getCSSModuleLocalIdent
		},
		"sass-loader"
	)
},
{
	test: lessRegex,
	exclude: lessModuleRegex,
	use: getStyleLoaders({
			importLoaders: 1,// 值是1
			modules: true, // 增加这个可以通过模块方式来访问css
			sourceMap: isEnvProduction && shouldUseSourceMap
		},
		"less-loader"
	),
	sideEffects: true
},
// 这个测试删了也不影响
{
	test: lessModuleRegex,
	use: getStyleLoaders({
			importLoaders: 1,
			sourceMap: isEnvProduction && shouldUseSourceMap,
			modules: true,
			getLocalIdent: getCSSModuleLocalIdent
		},
		"less-loader"
	)
},
// "file" loader makes sure those assets get served by WebpackDevServer.

需要注意一下几个地方：

1.lessRegex 中 importLoaders 的值为 1

当然这个是 2 也能使用，但是它的值是根据 lessRegex 变量后面正则中匹配的 loader 数来决定的，比如const cssRegex = /\.css$/只是处理 css 一种类型的文件，那应该就是 1；const sassRegex = /\.(scss|sass)$/;对应的是 scss 和 sass 两种类型，那就应该是 2.

2.lessRegex的use中增加 modules 配置

modules 可以不设置，不设置的话，less 只能通过字符串名的方式使用，比如定义了一个.title,引用时import './index.less'，使用时：<div className="title"></div>

如果需要通过模块的方式调用，则需要把 modules 设置成 true，就可以通过styles.title方式使用了。import styles from './index.less',使用<div className={styles.title}></div>

第二种配置方式

可以不增加新的变量，把 css 的配置包含 less

const cssRegex = /\.(css|less)$/; //增加less
const cssModuleRegex = /\.module\.(css|less)$/;

{
	test: cssRegex,
	exclude: cssModuleRegex,
	use: getStyleLoaders({
			importLoaders: 2,// 改成2
            modules: true,//使用模块方式访问样式
			sourceMap: isEnvProduction && shouldUseSourceMap
		},
		"less-loader" //增加loader
	),
	// Don't 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
}

全文完！！！2019-04-13