create-react-app不支持less的解决方式
Posted kungfupan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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修改后的配置如下
{
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`.
}
以上是关于create-react-app不支持less的解决方式的主要内容，如果未能解决你的问题，请参考以下文章
create-react-app搭配react16+ts+less
不使用npm eject 修改create-react-app的wepack配置less-loader