webpack-contrib/mini-css-extract-plugin

Lightweight CSS extraction plugin

mini-css-extract-plugin's Issues

Unhandled rejection TypeError: Cannot read property 'length' of undefined

Plugin supports modules/postcss?

Stack trace

 ~/D/P/M/frontend » yarn build:prod
yarn run v1.3.2
$ NODE_ENV=production webpack
(node:3898) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:3898) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
Unhandled rejection TypeError: Cannot read property 'length' of undefined
    at OriginalSource.size (/home/ralvke/.../frontend/node_modules/webpack-sources/lib/Source.js:17:23)
    at ConcatSource.size (/home/ralvke/.../frontend/node_modules/webpack-sources/lib/ConcatSource.js:52:61)
    at CachedSource.size (/home/ralvke/.../frontend/node_modules/webpack-sources/lib/CachedSource.js:35:42)
    at obj.assets.compilationAssets.map.asset (/home/ralvke/.../frontend/node_modules/webpack/lib/Stats.js:347:39)
    at Array.map (<anonymous>)
    at Stats.toJson (/home/ralvke/.../frontend/node_modules/webpack/lib/Stats.js:344:6)
    at Stats.toString (/home/ralvke/.../frontend/node_modules/webpack/lib/Stats.js:621:20)
    at compilerCallback (/home/ralvke/.../frontend/node_modules/webpack-cli/bin/webpack.js:477:32)
    at hooks.done.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:152:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
    at onCompiled (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:150:21)
    at hooks.afterCompile.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:470:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
    at compilation.seal.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compiler.js:467:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compilation.js:957:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/ralvke/.../frontend/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (/home/ralvke/.../frontend/node_modules/webpack/lib/Compilation.js:948:32)
    at _err1 (eval at create (/home/ralvke/.../frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:16:1)
    at /home/ralvke/.../frontend/node_modules/uglifyjs-webpack-plugin/dist/index.js:262:11
    at step (/home/ralvke/.../frontend/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:90:11)
    at done (/home/ralvke/.../frontend/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:99:22)
    at tryCatcher (/home/ralvke/.../frontend/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:693:18)
    at Promise._fulfill (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:638:18)
    at Promise._resolveCallback (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:432:57)
    at Promise._settlePromiseFromHandler (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:524:17)
    at Promise._settlePromise (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/home/ralvke/.../frontend/node_modules/bluebird/js/release/promise.js:614:10)

Done in 83.93s.

Config

plugins: [new MiniCssExtractPlugin()],
rules: [
  {
    test: /\.sss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: "[hash:base64:8]"
        }
      },
      {loader: "postcss-loader"}
    ]
  },
]

Environment

Node: 9.6.1
Yarn: 1.3.2
Webpack: 4.1.0
mini-css-extract-plugin: 0.1.0

🚨 TypeError: Class extends value undefined is not a constructor or null

Description

Not really sure what's going on, but the aforementioned error was thrown on my machine when including the plugin, i.e. const MiniCssExtractPlugin = require('mini-css-extract-plugin');.

Error Message & Stack Trace

TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/node_modules/mini-css-extract-plugin/dist/index.js:30:47)
    at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Module.require (module.js:606:17)
    at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
    at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Module.require (module.js:606:17)
    at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/webpack.config.js:8:30)
    at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Module.require (module.js:606:17)
    at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:133:13)
    at requireConfig (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:135:6)
    at /Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:140:15)
    at yargs.parse (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/webpack.js:234:39)

Config

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = env => ({});

Environment

Node.js v8.9.0
darwin 15.6.0
npm v5.5.1
webpack 4.0.1
mini-css-extract-plugin 0.1.0

Cannot read property 'chunkFilename' of undefined

I'm getting this error when attempting to compile my project for webpack 4 with mini-css-extract-plugin

ERROR in chunk main [entry]
main.e2e70e8fb55738755967.css
Cannot read property 'chunkFilename' of undefined

I don't see any other error details, so I'm not sure where I would even begin to look for the problem.

I've set up mini-css like this:

        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].[hash].css',
                chunkFilename: 'chunk.[chunkhash].css',
            }),
        ],
        module: {
            rules: [
                {
                    test: /\.less$/,
                    use: [MiniCssExtractPlugin.loader, ...cssLoaders, lessLoader],
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, ...cssLoaders],
                },
            ],
        },

The loaders look like this if you want to see those too:

let cssLoaders = [
    {
        loader: 'css-loader',
        options: {
            sourceMap: cssSourceMaps,
            root: publicDir,
            localIdentName: '[name]_[local]--[hash:base64:5]',
            importLoaders: 2,
        }
    },
    {
        loader: 'postcss-loader',
        options: {
            sourceMap: cssSourceMaps ? 'inline' : false,
        }
    }
];

let lessLoader = {
    loader: 'less-loader',
    options: {
        sourceMap: cssSourceMaps, // https://github.com/webpack-contrib/less-loader#sourcemaps
        strictMath: true,
        strictUnits: true,
    }
};

I've tried setting the filenames the same as the README too:

      filename: "[name].css",
      chunkFilename: "[id].css"

But I get the same error.

I've got dozens of .less files, so I'm not sure which one, if any, is tripping up the plugin.

can‘t split css by chunk

I want to split css by chunk，but all build into Entrypoint app，generate only one css(app.css). This is my config:
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

page:

and has differance css in differance chunk, but it generate only one css:

this is my code:
https://github.com/yiqianglin/webpack4Demo

Cannot destructure property `createHash` of 'undefined' or 'null'.

when build with [email protected]，the shell show that info：

const { Template, util: { createHash } } = _webpack2.default;
                          ^
TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.

Out is not run through optimization.minimizer

I'm not sure if this is a bug or omission in the docs (still wrapping my head around all the webpack 4 changes), but the output is not minimized in production mode using the webpack defaults.

CSS file is not emitted on incremental rebuild in watch mode

Using mini-css-extract-plugin 0.2.0 with webpack 4.1.0 with this config and -watch option:

module: {
	rules: [
		{
			test: /\.css$/,
			use: [
				MiniCssExtractPlugin.loader,
				{ loader: 'css-loader', options: { url: false, sourceMap: true } }
			]
		},
		{
			test: /\.scss$/,
			use: [
				MiniCssExtractPlugin.loader,
				{ loader: 'css-loader', options: { url: false, sourceMap: true } },
				{ loader: 'sass-loader', options: { sourceMap: true } }
			]
		}
	]
}

Initial build works fine and outputs css bundle as expected. Whenever i change my scss file, an incremental rebuild is triggered and this changed scss file is clearly shown in the console output, but somehow the emitted css bundle is not changed from the initial build. If i rerun the build from scratch, the changes are correctly propagated to filesystem. Here is an output after incremental rebuild.

>  0% compiling
>  10% building modules 4/4 modules 0 active
>  10% building modules 5/6 modules 1 active ...s\solo-showcase-columns-widget.scss 0
>  10% building modules 7/7 modules 0 active
>  10% building modules 11/11 modules 0 active
>  10% building modules 12/13 modules 1 active ...ures\content-bank\content-bank.scss 0
>  10% building modules 18/18 modules 0 active
>  10% building modules 19/20 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 27/28 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 32/33 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 33/34 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  11% building modules 44/46 modules 2 active ...tend\features\balance\invoices.scss 0
>  11% building modules 45/47 modules 2 active ...\features\balance\transactions.scss 0
>  12% building modules 46/47 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  12% building modules 48/49 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  12% building modules 49/50 modules 1 active ...nd\vendor\custom\sortable\sortable.js
>  12% building modules 49/51 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  12% building modules 61/63 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  12% building modules 67/69 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  13% building modules 79/82 modules 3 active ...wizard\step-budget\budget-step.scss 0
>  13% building modules 82/85 modules 3 active ...udience-popup\persist-audience.scss 0
>  13% building modules 84/86 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 96/99 modules 3 active ...nents\file-input\sm-file-input.scss 0
>  14% building modules 97/99 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 109/111 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 111/114 modules 3 active ...d\vendor\custom\introjs\introjs.css 0
>  14% building modules 112/114 modules 2 active ...works\wizard\step-goal\goal-step.scss
>  14% building modules 113/114 modules 1 active ...works\wizard\step-goal\goal-step.scss
>  70% finish module graph FlagDependencyExportsPlugin
>  70% sealing WarnCaseSensitiveModulesPlugin
>  72% after dependencies optimization
>  75% basic chunk optimization RemoveParentModulesPlugin
>  76% advanced chunk optimization SplitChunksPlugin
>  75% basic chunk optimization RemoveParentModulesPlugin
>  84% module id optimization
>  86% after chunk id optimization
>  88% hashing
>  90% additional chunk assets processing
>  95% emitting unnamed compat plugin
> Hash: bf05be2f878f02734bcc
> Version: webpack 4.1.0
> Time: 478ms
> Built at: 2018-3-7 18:16:56
>      Asset     Size  Chunks             Chunk Names
>    en.json  150 KiB          [emitted]  
>    es.json  157 KiB          [emitted]  
>    ru.json  156 KiB          [emitted]  
> pt-BR.json  158 KiB          [emitted]  
>  + 38 hidden assets
> Entrypoint solomoto [big] = runtime.js vendor.css vendor.js solomoto.css solomoto.js
> Entrypoint showcase [big] = runtime.js vendor.css vendor.js showcase.css showcase.js
> Entrypoint showcase-wysiwyg = runtime.js showcase-wysiwyg.css showcase-wysiwyg.js
> Entrypoint registration [big] = runtime.js vendor.css vendor.js registration.css registration.js
> Entrypoint admin-panel [big] = runtime.js vendor.css vendor.js vendor-admin.js admin-panel.css admin-panel.js
> Entrypoint content-panel [big] = runtime.js vendor.css vendor.js vendor-admin.js content-panel.css content-panel.js
> [./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss] 39 bytes {solomoto} [built]
> [./Frontend/vendor/custom/sortable/sortable.js] 36 KiB {vendor} [built]
>     + 1378 hidden modules
> Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--7-1!node_modules/sass-loader/lib/loader.js??ref--7-2!Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss:
>     Entrypoint mini-css-extract-plugin = *
>     [./node_modules/css-loader/index.js??ref--7-1!./node_modules/sass-loader/lib/loader.js??ref--7-2!./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss] ./node_modules/css-loader??ref--7-1!./node_modules/sass-loader/lib/loader.js??ref--7-2!./Frontend/features/media/social-networks/wizard/step-goal/goal-step.scss 23.9 KiB {mini-css-extract-plugin} [built]
>         + 1 hidden module

Support multiple instances of MiniCssExtractPlugin

The extract-webpack-text-plugin allows you to define multiple instances of the plugin. Does MiniCssExtractPlugin support the same feature? My end goal is to generate multiple bundles for SASS themes.

Resource Files

with sass-loader i was able to do something like this to add a resource file to all my scss files

is that possible with this as well? and im just missing it?

{
            loader: 'sass-loader',
            options: {
              data: '@import "styles/resources";',
              includePaths: [path.join(cwd, 'app')],
            },
          },```

Cannot use extract for CSS and SCSS modules

I have two modules:

  module: {
    rules: [{
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
      ]
    }],
    rules: [{
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
          },
        },
        'sass-loader',
      ]
    }],
  },

When I try to build the following error appears:

Hash: 59c22bb51c79f33f2b5e
Version: webpack 4.1.0
Time: 516ms
Built at: 2018-3-6 12:23:23
 2 assets
Entrypoint main = main.css main.5e025217ef78681389a6.js
   [1] ./example.scss 39 bytes {0} [built]
   [2] ./example.css 157 bytes {0} [built] [failed] [1 error]
   [3] ./example.js 49 bytes {0} [built]
    + 1 hidden module

ERROR in ./example.css
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
| h2 {
|     color: red;
| }
 @ ./example.js 1:0-23
Child mini-css-extract-plugin node_modules/mini-css-extract-plugin/dist node_modules/css-loader/index.js??ref--4-1!node_modules/sass-loader/lib/loader.js!example.scss:
    Entrypoint mini-css-extract-plugin = *
       [1] ./node_modules/css-loader??ref--4-1!./node_modules/sass-loader/lib/loader.js!./example.scss 183 bytes {0} [built]
        + 1 hidden module

Repo with bug reproduction https://github.com/mike1808/webpack-example-mini-extract-bug

Also tested with the master branch, the result is the same

Consuming directly from GitHub isn't possible

If you do npm i webpack-contrib/mini-css-extract-plugin#2899ed376a290817b03f3280d4f552b9326224ba -D, the package is missing source making it impossible to use the plugin.

One way to solve this would be to set up a postinstall script.

Webpack 4 - should work with css-hot-loader

I have reported an issue on css-hot-loader
I added it here too because I cannot understand which one is creating the problem.
What is certain is that css-hot-loader did work with the ExtractTextPlugin

I saw in the TODO that this is planned, but there is no opened issue related to it, I wouldn't have reported it otherwise!

Async loading without document context throws errors

I'm trying to get mini-css-extract-plugin to play nicely with react-loadable on the server. Everything seems relatively easy except that when I run Loadable.preloadAll() on the server, requireEnsure gets called for every async chunk. If the async chunk has CSS that hasn't been loaded it tries to insert a new link element, a ReferenceError: document is not defined gets thrown.

Path variable [contenthash] not implemented in this context

I've got this error:

ERROR in chunk account
[name]-[contenthash].bundle.css
Path variable [contenthash] not implemented in this context: [name]-[contenthash].bundle.css

After adding some debug into TemplatedPathPlugin:replacePathVariables function:

• my account chunk has contentHash: { javascript: 'c3b502d300' }
• data.contentHashType is undefined, should be javascript ?

Question: Multiple JS chunks, single CSS chunk

Is it possible to have multiple JS chunks but a single css output file?

My current setup is:

  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          compress: {
            passes: 2,
          },
          output: {
            comments: false,
          },
        },
      }),
    ],
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          filename: 'vendorbundle.js',
          test: m => /node_modules/.test(m.context),
        },
      },
    },
  },

...
...

    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),

This generates 2 JS files, and 2 css files (styles.css, and 1.styles.css)

What I would like to have is a single css file, is that doable?

What's the difference between filename and chunkFilename options

As the title, it seems sometimes one is used, sometimes the other. Could someone explain?

How can I keep the css order in the css file when I use mini-css-extract-plugin？

This issue is related to the issue from extract-text-webpack-plugin

How can ensure core.scss (global style which is included in the entry file) is before greenContainer.scss (component style which is included in a component file)?

Test repo: https://github.com/choyongjoon/webpack4-css-modules

Codes

index.js

import React from 'react'
import { render } from 'react-dom'

import App from 'App'
import 'styles/core.scss'

render(
  <App />,
  document.getElementById('root')
)

core.scss

:global {
  @import '~normalize.css/normalize';

  // override-bootstrap
  .bg-primary {
    background-color: red;
  }
}

App.js

import React from 'react'

import GreenContainer from 'components/GreenContainer'

export class App extends React.Component {
  render () {
    return (
      <GreenContainer />
    )
  }
}

export default App

greenContainer.js

import React from 'react'

import classes from './GreenContainer.scss'

export default class GreenContainer extends React.Component {
  render () {
    return (
      <div className={`bg-primary ${classes.greenContainer}`} />
    )
  }
}

greenContainer.scss

.greenContainer {
  height: 400px;
  // override core.scss
  background-color: green;
}

Result

main.css

.GreenContainer__greenContainer{background-color:green;height:100%}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
...
.bg-primary{background-color:red}

Hook for subresource integrity

Hi, I'm maintaining webpack-subresource-integrity and I'd like to help make the two plugins work together, to ensure integrity for injected link rel="stylesheet" tags.

For this there would need to be a way for our plugin to add attributes (integrity and crossorigin) somewhere around here.

One approach could be a hook that receives an object with the tag name and all attributes. rel and href would be needed by our plugin, but I guess for completeness it should also include onload and onerror. It would return an object with the same structure. The code would then look something like this:

let tag = {
    tagName: 'link',
    attributes: {
        rel: '"stylesheet"',
        onload: 'resolve',
        onerror: 'reject',
        href: `${mainTemplate.requireFn}.p + ${linkHrefPath}`,
    }
};

// up for debate where this hook would be declared, what name to use,
// how to handle backward compatibility etc.
if (compilation.hooks.mutateInjectedTag) {
    tag = compilation.hooks.mutateInjectedTag.call(tag);
}

Template.indent([
    `var el = document.createElement(${JSON.stringify(tag.tagName)})`
].concat(Object.entries(tag.attributes).map(([name, value]) => (
    `el[${JSON.stringify(name)}] = ${value}`
))).concat([
    "...",
]);

This aims to be generic, so that it could be used for other plugins that inject tags or that want to modify injected tags.

It's just a suggestion of course, there are other approaches that would also work. But first, what do you think of the general idea, would you accept a PR for this?

mini-css-extract-plugin + sass-loader + splitChunks

I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:

entry: {
   a: ['./js/a.js', './scss/a.scss'],
   b: ['./js/b.js', './scss/b.scss']
},
module: {
    rules: [
       [...],
       {
        test: /\.(css|sass|scss)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        require('autoprefixer')
                    ],
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            js: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 7,
            },
            css: {
                test: /\.(css|sass|scss)$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
            }
        }
    }
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "dist/[name].css",
    }),
]

And the following sass files:

// a.scss
@import 'global.scss';
@import 'vendor.css';
[...] 

// b.scss
@import 'global.scss';
@import 'vendor.css';
[...]

When I run webpack vendor.css is inserted in in commons.css bundle while global.scss not.

In general every import of .css file get processed by splitChunks option (only if extension .css is specified in the name) while .scss files not.

I have a project with multiple sass entry point and many @import of sass component and I'd like to create a common bundle with shared sass modules.

The chunk of js files works properly.

Disable Async Chunking

This may be an anti-pattern to what mini-css-extract-plugin is trying to accomplish but I'm migrating from Webpack v2 to Webpack v4 in a large React application with many async routes containing CSS modules and extract-text-plugin is not working correctly. mini-css-extract-plugin works well but async chunking causes some page load animations, etc. to break because previously all of the CSS was loaded in a single bundle.

I'm wondering if there is an option for the plugin that I can disable CSS chunking until my team has time to address considerations associated with CSS chunking?

extracted CSS file is being referenced in <script> tag instead of the expected JS bundle file

Overview

Not sure if this might be a compatibility issue with HtmlWebpackPlugin or not, but after migrating from ExtractTextWebpackPlugin as part of webpack v4 upgrade, I am seeing the the main CSS file being referenced where a JS file should be referenced in the built index.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Providence Geeks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link href="index.css" rel="stylesheet"></head>

  <body>
    <div id="root">Loading ...</div>
    <script type="text/javascript" src="0.chunk.js">
    </script><script type="text/javascript" src="index.css"></script></body>
</html>

notice a index.css path within the second <script> tag

This causes an Syntax error of "unknown token" in the browser, because it doesn't understand the CSS it is getting (in this case an @import statement)

Technical Summary

Environment

• OS: OSX 10.13.3
• Node: v8.9.4
• webpack: ^4.1.0

Config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',

  entry: {
    index: './index.jsx'
  },

  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].[chunkhash].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

  context: path.resolve(__dirname, 'src'),

  resolve: {
    extensions: ['.jsx', '.js']
  },

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /node_modules/,
          enforce: true
        }
      }
    }
  },

  module: {
    rules: [{
      test: /\.(js*)x$/,
      enforce: 'pre',
      loader: 'eslint-loader',
      exclude: path.join(__dirname, 'node_modules')
    }, {
      test: /\.(js*)x$/,
      loaders: [
        'babel-loader',
        'react-hot-loader/webpack'
      ],
      exclude: path.join(__dirname, 'node_modules')
    }, {
      test: /\.(s*)css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader', 
        'sass-loader'
      ]
    }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
    }, {
      test: /\.(ttf|eot|svg|jpe?g|png|gif|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'file-loader'
    }]
  },

  plugins: [
    new MiniCssExtractPlugin(),

    new HtmlWebpackPlugin({
      template: './index.html',
      chunksSortMode: 'dependency'
    }),

    new webpack.ProvidePlugin({
      jQuery: 'jquery'
    })
  ]
};

Sample Repo

The issue can be reproduced with the self contained webpack config by running the following steps

1. git clone this repo
2. git checkout test-mini-css-extract-plugin
3. run yarn install
4. run yarn mini-extract

Actual: build/index.html has a CSS file + path inside a <script> tag
Expected: build/index.html should only reference JS files in <script> tags

What's the point of extracting CSS?

My apologies if this issue is off-base for GitHub - I've previously posted it to Stack Overflow, but it's a little quiet over there.

I'm using the Mini CSS Extract Plugin to split my CSS into its own file in my dist folder of my webpack project.

My webpack.config.js file looks like this:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
};

When I npm run build, this builds the file style.css in my dist folder, which is identical to my style.css file in my src folder. I have to include

<head>
  ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head> 

in the head of index.html in the dist folder for this to work. So my question is - what's the point of extracting the CSS like this? If the style.css file in the src folder is identical to the style.css file in the dist folder, and I have to include

<link rel="stylesheet" type="text/css" href="style.css" />

in the head of my HTML, I don't understand what the advantage is of doing things this way, even though the Webpack Documentation states

Note that you can, and in most cases should, split your CSS for better load times in production.

resolved: id will be a prepended to content hash name even if not used

Hi.

Testing 0.3.0 with [contenthash] support. We use [chunkhash] (now [contenthash]) only for Nuxt.js production builds so even by renaming files, page level chunks won't invalidate the cache.

While [contenthash] works great with js, it seems [id]. will be prepended to the name of .css chunks.

Other info

Using [name].[contenthash], [id] won't be prepended:

Reproduction steps

• Clone dev branch of nuxt.js repo.
• Edit test/fixtures/extract-css/nuxt.config.js to force disable name from chunk names
• Build extractCSS fixture using ./bin/nuxt build test/fixtures/extract-css

I try to investigate and also provide better reproductions using pure tests.

Please publish the new version 😬

I'm stuck because of public path issue, the fix was merged yesterday, please publish a new version to reflect the same.

Thanks.

Duplicate <link> tags are added each time a chunk is import()ed

// a.js
import('./b.js').then(() => { import('./b.js') })

// b.js
import './b.css'

/* b.css */
body {
  background: pink;
}

I'm not sure if this is a bug or a feature, though 🤔

Can filenames support slashes (for directories)?

Node 8.9.4 macOS High Sierra 10.13.3

Thanks for this project! It's been great so far.

As noted in the readme, the output options are meant to be similar to those for the main webpack config. However, one difference currently is that directory specifications are chopped off the front for the css plugin, while they're respected for JavaScript. It would be great if it were possible to specify a subdirectory under the main output path for CSS assets.

return {
    entry: {
      main: './src/index.js',
    },
    resolve: { extensions: ['.js', '.jsx'] },
    output: {
      path: __dirname + '/dist',
      filename: 'js/[name].js' // <-- JS files end up at ./dist/js/*.js
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin('css/[name].css') // <-- CSS in ./dist/*.css 😲
    ]
  };

P.S. While writing this up I realized it's possible to get what I want by doing:

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
    path: __dirname + '/dist/css'
  }) // <-- CSS now in ./dist/css/*.css 
]

However I would argue the other behavior is still surprising. CSS assets automatically gets placed relative to the main output path if no special path is specified, but not before stripping off meaningful information.

Getting Type Error when updated to 0.3.0 from 0.2.0

I updated from version 0.2.0 to 0.3.0 and I am getting the following error.

I reinstalled node modules but the error only went away when i switched to 0.2.0.

My Webpack configuration

const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Stylish = require("webpack-stylish");

const webpack = require("webpack");
const path = require("path");

module.exports = {
entry: {
app: ["./src/scripts/app.js"]
},
output: {
filename: "app.js",
path: path.resolve("app")
},
mode: "production",
devServer: {
contentBase: path.join("app"),
compress: true,
port: 2222,
hot: true,
stats: "errors-only"
},
stats: "errors-only",
module: {
rules: [
{
test: /.js$/,
include: path.resolve("./src/scripts/"),
loader: "babel-loader?cacheDirectory=true",
options: {
presets: ["es2015"],
compact: true
}
},
{
test: /.scss$/,
include: path.resolve("./src/scss/"),
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /.html$/,
loader: "ng-cache-loader?prefix=../templates/**"
}
]
},

plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "css/styles.css"
}),
new CopyWebpackPlugin([{ from: "index.html", to: "index.html" }]),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(["app"]),
new Stylish()
]
};

The Error I get

TypeError: Cannot destructure property createHash of 'undefined' or 'null'.

at Object. (/node_modules/mini-css-extract-plugin/dist/index.js:26:44)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/webpack.config.js:3:30)
at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/node_modules/webpack-cli/bin/convert-argv.js:133:13)
at requireConfig (/node_modules/webpack-cli/bin/convert-argv.js:135:6)
at /node_modules/webpack-cli/bin/convert-argv.js:142:17
at Array.forEach ()
at module.exports (/node_modules/webpack-cli/bin/convert-argv.js:140:15)
at yargs.parse (/node_modules/webpack-cli/bin/webpack.js:239:39)
at Object.parse (/node_modules/webpack-cli/node_modules/yargs/yargs.js:543:18)
at /node_modules/webpack-cli/bin/webpack.js:217:8
at Object. (/node_modules/webpack-cli/bin/webpack.js:512:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
error An unexpected error occurred: "Command failed.
Exit code: 1

The version of my webpack is 4

Trouble getting source map to work

Maybe I'm missing something but I can't get the sourcemaps to generate either as a separate file or inline. I'm using the latest webpack (4.1.1) and mini-css-extract-plugin (0.2.0).

Relevant webpack module rules:

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

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

...and plugin:

    new MiniCssExtractPlugin({
      filename: 'css/styles.css'
    }),

Do I need to specify devtool property also ?

publicPath doesn't seem to be honoured when loading CSS

[email protected]

Using an app with a router, which splits code per route and has publicPath: '/' in its output options, I'm seeing the following inserted into <head> when visiting a route which imports CSS:

If I log out outputOptions in loader.js it looks ok, but don't know what's ultimately responsible for creating the full path in the compilation.createChildCompiler or NodeTemplatePlugin it gets passed to:

{ outputOptions: { filename: '*', publicPath: '/' } }

CSS from node_modules is not include in the generated css

I am using the module with Webpack 4.1.0
We have a ui-lib that has some components along with there scss files.

e.g.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TanForm from 'ui-lib/src/components/TanForm';

...
render() {
   return (
        <TanForm />
    )
}

I am using the plugin like

    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'obsstyles.css',
    }),

   ...

  module: {
    rules: loaders.concat([
      {
        test: [/\.scss$/, /\.css$/],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 'sass-loader',
        ],
        include: [
          /src/,
          /ui-lib/,
        ],
      },
    ]),
  },

The generated css does not contain the classes from the ui-lib components
Not sure if my setup is wrong or there is a bug. I see many undefined classes.

Issue loading chunks in production that have no corresponding css file

It appears that when this plugin is used in an app that has Javascript chunks that to do not have an corresponding css chunk it causes the underlying Webpack loading code to throw an exception.

The error does not happen in webpack's development mode, so I'm guessing the js minifier (webpacks) that is run on the runtime code during production build is somehow breaking it..

Below are some screenshots of the erroneous code.

I'm using the latest version of webpack & this plugin.

CSS bundle not generated on production mode

I am having issues configuring this plugin on mode: 'production'. The CSS bundle is not generated. However, for some reason everything works as expected if I switch to mode: 'development'. Is this expected?

Here is a minimal setup to test this out:

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');

module.exports = {
    mode: 'production',
    entry: [
        path.resolve(__dirname, 'src/index.js')
    ],
    output: {
        filename: '[name].[chunkhash].js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[chunkhash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    }
};

src/index.js

import './styles.css'

styles.css

body {
    background-color: blue;
}

---

Here is what I am using:

OS: Arch
webpack: 4.1.1
mini-css-extract-plugin: 0.2.0
css-loader: 0.28.10
node: 8.9.4
yarn: 1.5.1

Note: I tried this in a more complicated configuration using html-webpack-plugin, babel-loader, etc. Everything works normally on development, but it doesn't on production. Let me know if you would like me to provide that configuration as well!

GitHub readme doesn't reflect actual functionality

The stable and development version are two different things with different sets of features. I got burned by this as I tried to use a development feature and there's no easy way to do that due to #61. Maybe it would be better to push development bits to a branch of its own so people don't get confused.

Hot Reload plan?

is there any plan for supporting hot reload yet?

Can filename/chunkFilename support function type ?

Much thanks for this project!

Here my project is a multi-page project, which means that I need my dist directory to be like this:
dist/
|---a/
| |---js/
| | |---a.js
| |---css/
| | |---a.css
| |---html/
| | |---a.html
|---b/
| |---js/
| | |---b.js
| |---css/
| | |---b.css
| |---html/
| | |---b.html

The entry point is 'xxx/js/xxx.js' so the [filename] in mini-css-extract-plugin is 'xxx/js/xxx'.
After webpack build my css files are in the [xxx/js/] directory, not my expectation [xxx/css/] directory.

In extract-text-webpack-plugin [filename] can be a function type and provide a getPath function as its arguments.
Can mini-css-extract-plugin's [filename] support function type like this ?
Or any other suggestion about the above implementation ?

Webpack generate unnecessary styles.js file with css entry

I have two entry, one for javascript bundling, one for css bundling, I use this plugin for extracting css, everything is OK except generating a unnecessary styles.af6d7e48e7.js file in my dist/js folder.

Environment

- macOS 10.13.3
- node v9.6.1
- yarn v1.3.2

Webpack entry

PATH.entry = {
  bundle: './src/index.js',
  styles: './src/styles/main.css',
};

Dist structure

ritchie at MacBook-Air in ~/D/W/w/dist
↪ tree
.
├── css
│   ├── styles.af6d7e48e7.css
│   └── styles.af6d7e48e7.css.map
├── favicon.ico
├── fonts
│   ├── lobster.58a4085516.woff2
│   └── lobster.e7f8a498bc.woff
├── img
│   └── logo.89088456bc.png
├── index.html
├── js
│   ├── bundle.32992ee976.js
│   ├── bundle.32992ee976.js.map
│   ├── dll.manifest.json
│   ├── styles.af6d7e48e7.js
│   ├── styles.af6d7e48e7.js.map
│   ├── vendor.decae7f1b9.dll.js
│   ├── vendor.decae7f1b9.dll.js.map
│   └── vendor.dll.manifest.json
├── manifest.json
└── robots.txt

I use webpack-manifest-plugin to generat assets manifest.json for backend reference, the unnecessary styles.af6d7e48e7.js is in the manifest.json. I can't use filter to remove files like styles.af6d7e48e7.js because the output filename is depending on entry name.

Example repo

laozhu/wsk

Clone the example repo and run yarn install and yarn start will get the same dist structure above.

My problem

Any idea for not generating files like styles.af6d7e48e7.js, or remove these unnecessary files from dist and manifest.json?

Content hash support

Using [email protected]

Is it possible to support a content hash in the filename, like extract-text-webpack-plugin's [contenthash]?

Using filename: '[name].[chunkhash:8].css' the .css hash is also changing when only the JavaScript in the chunk has changed:

Don't refetch a CSS chunk if it's inlined into the HTML <head>

In Gatsby v2, we'll be using webpack 4 and mini-css-extract-plugin. Gatsby tries to always inline the critical CSS for a page — which aligns perfectly with mini-css-extract-plugin's goals. Currently, however, if we inline a CSS chunk, it'll still be loaded once the webpack runtime loads in the client. Discussing this with @sokra, he suggested that we'd adopt a convention where if you add a data-href to the <style> tag that then webpack wouldn't reload the inlined css.

mini-css-extract-plugin supports HMR

Let mini-css-extract-plugin support HMR as soon as possible

Allow defining which chunks will be loaded dynamically

It would be useful to have means to define which chunks are loaded dynamically and which are not. I did a small implementation that allows this:

...

module.exports = {
    plugins: [
        new CssExtractPlugin({
            loadAsync: chunk => chunk.modulesSize() >= 200000, // condition
            captureCss: CssExtractPlugin.writeManifest('css-extract.json') // action
        }),
    ]
};

I'm not sure of the naming but basically this does the trick for me. I write a manifest which I use later to inline the CSS but you could easily write a CSS file through webpack here as well. You can find my code here.

Let me know if you want a PR.

webpack 4 production mode always generates files with numeric prefix

The following files are generated:

1.styles.css
1.styles.css.map

For this webpack config entry:

  new MiniCssExtractPlugin({
    filename: 'styles.css',
  }),

And this css loader setup:

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        minimize: {
          discardComments: {
            removeAll: true
          },
        }
      }
    }
  ]
}

The same configuration using the ExtractTextPlugin was generating files without the 1. prefix

SourceMap could not be removed with `devtool: false` and `mode: production`

https://github.com/JounQin/Rubick/blob/assets/static/app.029a1ec171ca216e26b5.css#L3

sourceMappingURL is not removed.

webpack Configuration: https://github.com/JounQin/Rubick/blob/master/build/base.ts

Reproduction Step: yarn build and view app.*.css file in dist/static folder.

Path variable [contenthash] not implemented in this context

Code:

new MiniCssExtractPlugin(
{
    filename: "[contenthash].min.css",
    chunkFilename: "[contenthash].chunk.min.css"
}

Output:

Path variable [contenthash] not implemented in this context: [contenthash].min.css

[chunkhash] and [hash] works fine.

macOS: 10.13.3
Node.js: 9.9.0
Webpack: 4.3.0
mini-css-extract-plugin: 0.2.0

How to override `webpack.output.publicPath`

this is mini-css-extract-plugin config:

 plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            publicPath: "../../../"
        })
    ]

but extract-text-webpack-plugin works as expect:

                use: extractStyle.extract({
                    fallback: "style-loader",
                    use: [cssLoader],
                    publicPath: '../../../'
                })

Disabling "Entrypoint..." loader messages

During the build, I receive the following messages. Is it okay and if yes, is there a way to disable them?

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/agent/components/login/login.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/agent/components/login/login.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/agent/components/login/login.css 1.08 KiB {0} [built]
    [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/agent/containers/profile/flag.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/agent/containers/profile/flag.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/agent/containers/profile/flag.css 571 bytes {0} [built]
    [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/common/components/noteComponent.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/common/components/noteComponent.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/common/components/noteComponent.css 6.99 KiB {0} [built]
    [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/lib/index.js??postcss!src/common/components/typing.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js??ref--5-1!./node_modules/postcss-loader/lib/index.js??postcss!./src/common/components/typing.css] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./src/common/components/typing.css 2.01 KiB {0} [built]
    [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]

How to avoid loading of extracted CSS?

I'm using this plugin to extract and inline my critical CSS.
Since the extracted CSS gets inlined in my HTML, it does not have to be loaded anymore.

Can I tell this plugin to not load the CSS it extracted?

If this is not (yet) possible, can it be implemented easily? (I could try and submit a PR)

Otherwise I'll switch back to extract-text-webpack-plugin.

Dependency is [email protected]

file: dist/index.js
error: _webpack2.default.Dependency is undefined.
version: [email protected]

Not working with css-loader options.modules

Testing with webpack v4.0.1 :

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

When requiring css file, it always get empty object:

const styles = require('xxx.css'); // always get {} even it is not.

Export locals as ES2015 Modules

Hi,

Right now when I use this plugin my bundle ends up having a bunch of these:

function(e, t, n) {
    e.exports = {
      home: "home_4zXj",
      headerContents: "headerContents_fgfT",
      info: "info_SpI-",
      dcmp: "dcmp_7LbX",
      cmp: "cmp_FYP2",
      pre: "pre_1JF_",
      off: "off_2kzf",
      adminPanel: "adminPanel_VjUM",
      navigationDrawerButtonContainer: "navigationDrawerButtonContainer_Gjyw",
      navigationDrawerButton: "navigationDrawerButton_11km"
    };
  }

Since this does not use es6 exports and instead uses module.exports, webpack is unable to inline these. If this plugin did use es6 exports, my bundle size would be much smaller because they could be inlined:

Code coming out of this plugin:

export const home = "home_4zXj";
export const headerContents = "headerContents_fgfT";
export const info = "info_SpI-";
// etc.

export default {
  home: "home_4zXj",
  headerContents: "headerContents_fgfT",
  info: "info_SpI-",
  dcmp: "dcmp_7LbX",
  cmp: "cmp_FYP2",
  pre: "pre_1JF_",
  off: "off_2kzf",
  adminPanel: "adminPanel_VjUM",
  navigationDrawerButtonContainer: "navigationDrawerButtonContainer_Gjyw",
  navigationDrawerButton: "navigationDrawerButton_11km"
};

Then, after Webpack processes it, the css module would be inlined, and unused properties would be removed.

I made a fork of extract-text-webpack-plugin that does this: webpack-contrib/extract-text-webpack-plugin@master...calebeby:master

Would you accept a similar PR to this repo?

Thanks!!!

SplitChunks configuration does not affect extracted css files

Hello! I'm using this plugin with webpack 4 splitChunks option configured to extract vendor code to a separate chunk like this:

optimization:{
    splitChunks: {
        chunks: "all",
        minSize: 1000,
        minChunks: 1,
        maxAsyncRequests: 10,
        maxInitialRequests: 10,
        name: true,
        cacheGroups: {
            default: false,
            vendors: {
                name: 'vendor',
                test: /node_modules[\\/]/,
                priority: 3
            }
        }
    }
}

It looks like this plugin does not honour this configuration and does not extract vendor css into separate file. Instead it adds vendor styles into every entrypoint css file, which leads to css duplication between several entrypoints. I'm not sure if this is an expected behavior or a bug. I could provide a simple reproduction repo if it's needed.