javascriptwebpackbundling-and-minificationextract-text-plugin

Webpack extract text plugin unknow word export error


I'm having these errors when bundling my app and I can't figure why it's not working. I was using style-loader before and now I'm trying to implement extract-text plugin but got these errors :

enter image description here

The thing is all of this was actually working with style-loader, I'm just replacing style-loader with extract plugin, not changing any other loader or plugin, and I searched but didn't found any solution.

vuetify.css can be found here https://github.com/vuetifyjs/vuetify/tree/master/dist

here is my index.scss :

@import "default";
@import "list";
@import "page";
@import "toolbar";

And here is part where I'm importing the files :

import 'vuetify/dist/vuetify.min.css';
import './sass/index.scss';

Webpack module config :

module: {
    rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    scss: 'css-loader?url=false!sass-loader',
                },
                extractCSS: true,
            }
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader',
                fallback: 'style-loader!css-loader'
            })
        },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader?url=false!sass-loader',
                fallback: 'style-loader!css-loader?url=false!sass-loader'
            })
        },
        {
            test: /\.(png|jpg|gif|svg|ttf|otf|eot|svg|woff(2)?)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        },
    ]
}

plugin config :

plugins: [

    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        }
    }),

    new CleanWebpackPlugin([
        getPath('../cordova/www/**'),
    ], {
        root: getPath('..'),
    }),

    new CopyWebpackPlugin([{
            from: getPath('../index.html'),
            to: getPath('../cordova/www/index.html')
        },
        {
            from: getPath('../assets'),
            to: getPath('../cordova/www/assets/')
        },
    ]),

    new webpack.ProvidePlugin({
        fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
    }),

    new webpack.LoaderOptionsPlugin({
        minimize: false,
        debug: true
    }),

    new ExtractTextPlugin('styles.css')

],

Solution

  • Change /\.css$/ rule to this one.

      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }