webpack-contrib / mini-css-extract-plugin

Lightweight CSS extraction plugin
MIT License
4.66k stars 389 forks source link

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

Closed againksy closed 6 years ago

againksy commented 6 years ago

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

alexander-akait commented 6 years ago

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