使用create-react-app脚手架搭建的react项目时,会自带css和sass。
如果要在项目中需要使用less,需要进行一些配置。
一、先安装less 和 less-loader
npm install less less-loader --save-dev
二、暴露项目配置文件
运行命令:
npm run ejec
相关说明请参考:暴露配置文件
项目根目录下会生成config文件夹,在文件夹中找到并打开webpack.config.js文件
三、配置less,共分为两步
1、找到以下代码
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
在下面添加
// 添加less解析
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
2、找到以下代码
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-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,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
在下面添加
// 配置less支持
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-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,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
四、保存并运行项目
如果提示错误 TypeError: this.getOptions is not a function
是因为 less-loader 安装的版本过高,
需要先卸载并安装低版本的less-loader
npm uninstall less-loader
npm install less-loader@6.0.0