ant-design / antd-mobile-samples

antd-mobile samples
1.15k stars 1.09k forks source link

config-overrides.js 与postcss-preset-env插件结合问题 #64

Open huangliop opened 6 years ago

huangliop commented 6 years ago

我的工程是用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 6 years ago

@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',
              }),
            ],
          },
        },