Is ElementUI compatible with Webpack's ExtractTextPlugin?

[lucas-bremond]

Hi!

In my main.ts file, I have:

import 'element-theme-default' ;

and in my webpack.config.prod.js:

const extractCss = new ExtractTextPlugin
(
    {
        filename: 'css/[name].[contenthash]-first.css',
        disable: process.env.NODE_ENV === 'development'
    }
) ;

const extractSass = new ExtractTextPlugin
(
    {
        filename: 'css/[name].[contenthash]-second.css',
        disable: process.env.NODE_ENV === 'development'
    }
) ;

webpackConfig.module.rules = 
[
    ...webpackConfig.module.rules,
    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract
        (
            {
                use: ['css-loader'],
                fallback: 'style-loader'
            }
        )
    },
    {
        test: /\.*(sass|scss)$/,
        use: ExtractTextPlugin.extract
        (
            {
                use: ['css-loader', 'sass-loader'],
                fallback: 'style-loader'
            }
        )
    },
    {
        test: /\.(jpg|png|gif)$/,
        loader: 'file-loader?name=assets/img/[name].[ext]'
    },
    {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
    }
] ;

webpackConfig.plugins =
[
    ...webpackConfig.plugins,
    new CommonsChunkPlugin
    (
        {
            name: 'vendor',
            minChunks: function (module)
            {
                return module.context && module.context.indexOf('node_modules') !== -1 ;
            }
        }
    ),
    new CommonsChunkPlugin
    (
        {
            name: 'manifest',
            minChunks: Infinity
        }
    ),
    extractCss,
    extractSass,
    ...
] ;

module.exports = webpackConfig ;

but it does not work.

However, if I replace the ExtractTextPlugin.extract parts with:

...
{
        test: /\.css$/,
        use:
        [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader'
            }
        ]
    },
    {
        test: /\.scss$/,
        use:
        [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader'
            },
            {
                loader: 'sass-loader'
            }
        ]
    }
...

it works...

Any idea?