config-overrides.js 与postcss-preset-env插件结合问题
Opened this issue · 1 comments
huangliop commented
- antd-mobile 版本:2.1.11
- 浏览器 及其版本:Chrome 61
- 操作系统及其版本:windows 10
我的工程是用create-react-app创建的,然后使用了 config-overrides.js.
现在我需要使用postcss-preset-env,来实现cssnext的一些功能.
但是当我这样加入时,postcss-preset-env插件就无效,ant-mobile有效
config.module.rules[1].oneOf.unshift(
{
test: /\.css$/,
exclude: /node_modules|antd-mobile\.css|src\\index\.css|iconfonts\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]___[hash:base64:5]'
},
},
{
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-preset-env')({stage:0}),//support css-modules @value
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}
]
}
);
如果我用这个自己写的插件react-app-rewire-postcss-preset-env 来使 postcss-preset-env插件生效,但这样 exclude:/node_modules|antd-mobile\.css/
缺不生效了
代码如下,我在插件中已经添加了exclude:/node_modules|antd-mobile\.css/
const rewireCssModules = require('react-app-rewire-postcss-preset-env');
module.exports = function override(config, env) {
// ...
config = rewireCssModules(config, env,{stage:0,browsers:'> 2%'});
// ...
return config;
}
请问是不是我的集成方法错了?
Hucy commented
@huangliop 是那个 ident: 'postcss'
配置的问题,删掉就正常了,这个好像会采用之前缓存的
{
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'),
require('postcss-px-to-viewport')(),
require('autoprefixer')({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},