It remove browser prefix by default, but I want to save prefix when generate css files. about optimize-css-assets-webpack-plugin HOT 6 CLOSED

I finded the solution, we can pass by some option to cssnano, please view following example:

new OptimizeCssAssetsPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessorOptions: {
      safe: true,
      autoprefixer: { disable: true },
      mergeLonghand: false,
      discardComments: {
        removeAll: true
      }
    },
    canPrint: true
  });

the option of autoprefixer: { disable: true } will disable cssnano's autoprefixer and saved prefixer that already exist by ourselves.

from optimize-css-assets-webpack-plugin.

So what can I do ?

from optimize-css-assets-webpack-plugin.

me too.

from optimize-css-assets-webpack-plugin.

By default the CSS manipulation that this plugin does is delegated to cssnano. You can control the cssnano config in the cssProcessorOptions option.

This is a cssnano related issue.

from optimize-css-assets-webpack-plugin.

I able to make it work, sharing here just in case anyone stumble upon same issue.

It seems like if you set browserslist key in your package.json, then the optimization will remove the prefix only if the prefix is not required based on your browserlist. Autoprefixer has a section that explains this in its docs.

Example of browserslist:

{
"browserslist": [
    ">1%",
    "last 4 versions",
    "not ie < 9"
  ]
}

from optimize-css-assets-webpack-plugin.

While ansenhuang's answer is correct, if you want to only disable Autoprefixer's remove outdated prefixes function and keep everything else, replace disable: true with remove: false.

from optimize-css-assets-webpack-plugin.