五陵年少金市东，银鞍白马渡春风。这篇文章主要讲述create-react-app不支持less的解决方式相关的知识，希望能为你提供帮助。
进入node_modules
eact-scriptsconfig目录
修改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修改后的配置如下
【create-react-app不支持less的解决方式】
{
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`.
}
推荐阅读
- 网卡驱动,本文教您网卡驱动怎样安装
- The application is in break mode
- 2018年Android的保活方案效果统计
- Springboot系列（@SpringBootApplication注解）
- Android解析Paint类中MaskFilter的使用
- 解决android studio引用远程仓库下载慢(JCenter下载慢)
- 一骑绝尘
- 朝花夕拾Android性能优化篇之Apk打包
- Android上传GitHub