\n\n[![npm][npm]][npm-url]\n[![deps][deps]][deps-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![chat][chat]][chat-url]\n\nThis plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.\n\nIt builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.\n\nCompared to the extract-text-webpack-plugin:\n\n* Async loading\n* No duplicate compilation (performance)\n* Easier to use\n* Specific to CSS\n\nTODO:\n\n* HMR support\n\n
\n\n### Configuration\n\n#### Minimal example\n\n**webpack.config.js**\n\n```js\nconst MiniCssExtractPlugin = require(\"@applaud/mini-css-extract-plugin\");\nmodule.exports = {\n plugins: [\n new MiniCssExtractPlugin({\n // Options similar to the same options in webpackOptions.output\n // both options are optional\n filename: \"[name].css\",\n chunkFilename: \"[id].css\"\n })\n ],\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n options: {\n // you can specify a publicPath here\n // by default it use publicPath in webpackOptions.output\n publicPath: '../'\n }\n },\n \"css-loader\"\n ]\n }\n ]\n }\n}\n```\n\n#### Advanced configuration example\n\nThis plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`.\n\nHere is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.\n\n(Loaders options left out for clarity, adapt accordingly to your needs.)\n\n\n**webpack.config.js**\n\n```js\nconst MiniCssExtractPlugin = require(\"@applaud/mini-css-extract-plugin\");\nconst devMode = process.env.NODE_ENV !== 'production'\n\nmodule.exports = {\n plugins: [\n new MiniCssExtractPlugin({\n // Options similar to the same options in webpackOptions.output\n // both options are optional\n filename: devMode ? '[name].css' : '[name].[hash].css',\n chunkFilename: devMode ? '[id].css' : '[id].[hash].css',\n })\n ],\n module: {\n rules: [\n {\n test: /\\.(sa|sc|c)ss$/,\n use: [\n devMode ? 'style-loader' : MiniCssExtractPlugin.loader,\n 'css-loader',\n 'postcss-loader',\n 'sass-loader',\n ],\n }\n ]\n }\n}\n```\n\n### Minimizing For Production\n\nWhile webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:\n\n**webpack.config.js**\n\n```js\nconst UglifyJsPlugin = require(\"uglifyjs-webpack-plugin\");\nconst MiniCssExtractPlugin = require(\"@applaud/mini-css-extract-plugin\");\nconst OptimizeCSSAssetsPlugin = require(\"optimize-css-assets-webpack-plugin\");\nmodule.exports = {\n optimization: {\n minimizer: [\n new UglifyJsPlugin({\n cache: true,\n parallel: true,\n sourceMap: true // set to true if you want JS source maps\n }),\n new OptimizeCSSAssetsPlugin({})\n ]\n },\n plugins: [\n new MiniCssExtractPlugin({\n filename: \"[name].css\",\n chunkFilename: \"[id].css\"\n })\n ],\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n MiniCssExtractPlugin.loader,\n \"css-loader\"\n ]\n }\n ]\n }\n}\n```\n\n### Features\n\n#### Using preloaded or inlined CSS\n\nThe runtime code detects already added CSS via `` or `
![](\"https://cdn.worldvectorlogo.com/logos/javascript.svg\")
\n \n ![](\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg\"){kind=icon}
\n \n