# create-react-app 配置 less
我们一般都是通过 create-react-app 命令来创建的 react 项目，但是这种方式创建默认是对 sass 的配置，是没有 less 的配置的，所以我们就需要自己配置一下。
不暴露的方式 customize-cra 和 craco 都尝试了，但是可能是因为当前版本过高，均无法正确配置。
错误：https://github.com/arackaf/customize-cra/issues/315
最后还是采用 eject 的办法
首先暴露 webpack
npm run eject |
然后安装 less , less-loader
npm install less-loader --save
npm install less --save
打开 /config/webpack.config.js ，找到如下配置
// style files regexes | |
const cssRegex = /\.css$/ | |
const cssModuleRegex = /\.module\.css$/ | |
const sassRegex = /\.(scss|sass)$/ | |
const sassModuleRegex = /\.module\.(scss|sass)$/ |
在这个代码的下边添加两行 less 的配置
// style files regexes | |
const cssRegex = /\.css$/ | |
const cssModuleRegex = /\.module\.css$/ | |
const sassRegex = /\.(scss|sass)$/ | |
const sassModuleRegex = /\.module\.(scss|sass)$/ | |
const lessRegex = /\.less$/ // 新添加的 | |
const lessModuleRegex = /\.module\.less$/ // 新添加的 |
修改 getStyleLoaders 方法
原本的参数有两个：
const getStyleLoaders = (cssOptions, preProcessor){ | |
... | |
{ | |
loader: require.resolve(preProcessor), | |
options: { | |
sourceMap: true, | |
} | |
} | |
... | |
} |
添加一个新的参数，(便于修改一些选项)
const getStyleLoaders = (cssOptions, preProcessor,preProcessorOptions = { | |
sourceMap: true, | |
}){ | |
... | |
{ | |
loader: require.resolve(preProcessor), | |
options: preProcessorOptions | |
} | |
... | |
} |
全局搜索 test: sassModuleRegex ，找到如下代码位置：
// 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: { | |
mode: 'local', | |
getLocalIdent: getCSSModuleLocalIdent, | |
}, | |
}, | |
'sass-loader' | |
), | |
}, | |
// "file" loader makes sure those assets get served by WebpackDevServer. | |
// When you `import` an asset, you get its (virtual) filename. | |
// In production, they would get copied to the `build` folder. | |
// This loader doesn't use a "test" so it will catch all modules | |
// that fall through the other loaders. | |
{ | |
// Exclude `js` files to keep "css" loader working as it injects | |
// its runtime that would otherwise be processed through "file" loader. | |
// Also exclude `html` and `json` extensions so they get processed | |
// by webpacks internal loaders. | |
exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/], | |
type: 'asset/resource', | |
}, |
添加 less 的 loader 就完成了
// 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: { | |
mode: 'local', | |
getLocalIdent: getCSSModuleLocalIdent, | |
}, | |
}, | |
'sass-loader' | |
), | |
}, | |
//------------- 从这里往下都是添加的行 | |
{ | |
test: lessRegex, | |
exclude: lessModuleRegex, | |
use: getStyleLoaders( | |
{ | |
importLoaders: 2, | |
sourceMap: isEnvProduction | |
? shouldUseSourceMap | |
: isEnvDevelopment, | |
}, | |
'less-loader', | |
{ | |
sourceMap: true, | |
lessOptions: { | |
javascriptEnabled: true //less javascriptEnabled 参数 | |
} | |
} | |
), | |
// 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: 2, | |
sourceMap: isEnvProduction && shouldUseSourceMap, | |
modules: { | |
getLocalIdent: getCSSModuleLocalIdent, | |
}, | |
}, | |
'less-loader', | |
{ | |
sourceMap: true, | |
lessOptions: { | |
javascriptEnabled: true //less javascriptEnabled 参数 | |
} | |
} | |
), | |
}, | |
//------------- 从这里往上都是添加的行 | |
// "file" loader makes sure those assets get served by WebpackDevServer. | |
// When you `import` an asset, you get its (virtual) filename. | |
// In production, they would get copied to the `build` folder. | |
// This loader doesn't use a "test" so it will catch all modules | |
// that fall through the other loaders. | |
{ | |
// Exclude `js` files to keep "css" loader working as it injects | |
// its runtime that would otherwise be processed through "file" loader. | |
// Also exclude `html` and `json` extensions so they get processed | |
// by webpacks internal loaders. | |
exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/], | |
type: 'asset/resource', | |
}, |
配置完成
