mini-css-extract-plugin with splitChunks cacheGroups does not import css from node_modules

Created on 13 Aug 2018  路  1Comment  路  Source: webpack-contrib/mini-css-extract-plugin

Basically i have my css and scss imported from index.js.
Everything is ok in dev. But in production build the css from toastify from node_modules that is imported like this import 'react-toastify/dist/ReactToastify.css'
is not appears in styles.css so its not added to main css bundle.
here is webpack config:
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path');

module.exports = {
mode: "production",

context: __dirname,

entry: {
    'app': './src/index.js',
},
output: {
    filename: "js/[name].js",
    chunkFilename: 'js/[name].bundle.js',
    path: __dirname + "/public",
publicPath: '/',
},
optimization: {
noEmitOnErrors: true,
minimizer: [
  new UglifyJsPlugin({
    sourceMap: true,
    uglifyOptions: {
      output: {
        comments: false,
        ascii_only: true
      },
      compress: {
        warnings: false 
      }
    }
  })
],
    splitChunks: {
  chunks: "all",
        cacheGroups: {
            vendor: {
                test: /node_modules/,
                name: "vendor",
                chunks: "initial",
                enforce: true
            }
        }
    }
},

devServer: {
inline: true,
historyApiFallback: {
index: '/'
},
},

devtool: "source-map",

plugins: [
new webpack.DefinePlugin(injectConfig),
new MiniCssExtractPlugin({
filename: './css/styles.css',
chunkFilename: '[id].[hash].css',
allChunks: true,
})
]
,

resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json']
},

module: {
    rules: [
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
      plugins: ["transform-decorators-legacy", "syntax-dynamic-import"],
      presets: [ 'react', [  'es2015'  ],  'stage-0',  ]
    }
  },
  {
            test: /\.scss$/,
            use: [
      MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'resolve-url-loader'
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                    }
                }
            ]
  },

        {
    test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use: 'file-loader?name=../fonts/[name].[ext]'
  },

        {
            test: /\.css$/,
            use: [
      MiniCssExtractPlugin.loader,
                'css-loader' ,
                {
                    loader: 'resolve-url-loader',
                    options: {
                        sourceMap: true,
                    }
                },
            ]
        },
    ]
}

}

i noticed if i remove the splitChunks part- the toastify css appears in styles.css bundle, but with this part it does not.
Sorry for bad indent.

mini-css-extract-plugin": "^0.4.1"
"webpack": "^4.16.2"
node: 8.11.3

Most helpful comment

Not related to mini-css-extract-plugin, looks you have invalid configuration, but i can't read what you post because it is ugly

>All comments

Not related to mini-css-extract-plugin, looks you have invalid configuration, but i can't read what you post because it is ugly

Was this page helpful?
0 / 5 - 0 ratings