CODEWITHSUNDEEP
webpackcss-loaderextract-text-pluginextracttextwebpackplugin
burtyish
burtyish

Reputation: 1043

ExtractTextPlugin: How do I avoid having CSS Keyframes renamed?

If two animations are defined in one file, this file is then included in another two files, animations get the same single letter name a which breaks one of them with lower priority (because the latter overrides the former)

Source: css-loader issue on Github

I see the same effect when using ExtractTextPlugin with css-loader. Several different keyframes from different .scss files are all renamed to a. I've tried to disable the minimzation options discardUnused and mergeIdents, as described in the issue. I've even tried to disable minimizing entirely, but that didn't help.

Here's my configuration:

scss: {
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
                'css-loader?minimize=false',
                /* I've tried these too:
                'css-loader?sourceMap&minimize.discardUnused=false&minimize.mergeIdents=false',
                'css-loader?-minimize',
                {
                    loader: 'css-loader',
                    options: {
                        minimize: {                            
                            discardUnused: false,
                            mergeIdents: false,
                        }
                   }
                }
                */
                'sass-loader'
            ]
        })
}

I'm not sure if the problem lies in css-loader or in the way ExtractTextPlugin uses it. I've been working on this problem for hours. Would love to hear if anyone has any helpful tips.

Upvotes: 0

Views: 424

Answers (1)

burtyish
burtyish

Reputation: 1043

Turns out that it was another plugin doing the minifaction. As soon as I tweaked the options for webpack-rtl-plugin to disable minification, the problem was solved.

Upvotes: 0

Related Questions