create-react-app不支持less的解决方式
2024-09-04 17:06:19
进入node_modules\react-scripts\config目录
修改webpack.config.dev.js跟webpack.config.prod.js中关于loader的配置即可，注意loader是倒序执行的，less-loader需要先执行，所以写在规则的最后一个
webpack.config.dev.js修改后的配置如下
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
require.resolve('less-loader')
],
}
webpack.config.prod.js修改后的配置如下
{
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
require.resolve('less-loader')
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
}
最新文章
- 两个变量交换的四种方法（Java）
- 谈谈Fragment中的onActivityResult
- 68. 蓄水池抽样(Reservoir Sampling)
- 《C与指针》第九章练习
- verilog实现的16位CPU单周期设计
- Python的包管理工具Pip
- Checbox的操作含已选、未选及判断代码
- ASP.NET MVC 学习
- 一个使用enum实现多态的例子
- SpringBoot多数据源配置
- jquery下关于input和label的关于点击事件的坑
- synchronized修饰方法和代码块的区别
- C++实现简单学生管理系统
- php优秀框架codeigniter学习系列——CI_Security类学习
- django自定制Admin
- Final阶段第1周/共1周 Scrum立会报告+燃尽图 07
- axTOCControl右键
- the cause of StringBuild class
- hdu1232畅通工程(并查集，简单题)
- 浅谈kmp