|
1 | | -� |
| 1 | +<div align="center"> |
| 2 | + <img src="https://cdn.rawgit.com/jakubpawlowicz/clean-css/master/logo.v2.svg" alt="clean-css logo" width="500"/> |
| 3 | + <br> |
| 4 | + <a href="https://github.com/webpack/webpack"> |
| 5 | + <img width="200" height="200" |
| 6 | + src="https://webpack.js.org/assets/icon-square-big.svg"> |
| 7 | + </a> |
| 8 | +</div> |
| 9 | + |
| 10 | +A [clean-css](https://github.com/jakubpawlowicz/clean-css) loader for [webpack](https://github.com/webpack/webpack). |
| 11 | + |
| 12 | +# clean-css-loader |
| 13 | + |
| 14 | +[](https://www.npmjs.com/package/clean-css-loader) |
| 15 | +[](https://www.npmjs.com/package/clean-css-loader) |
| 16 | +[](https://travis-ci.org/retyui/clean-css-loader) |
| 17 | +[](https://greenkeeper.io/) |
| 18 | + |
| 19 | +## Install |
| 20 | + |
| 21 | +```bash |
| 22 | +# for webpack@4 or 3 or 2 |
| 23 | +yarn add -D clean-css-loader |
| 24 | + |
| 25 | +# for webpack@1.x |
| 26 | +yarn add -D clean-css-loader@0.14.0 |
| 27 | +``` |
| 28 | + |
| 29 | +## Usage |
| 30 | + |
| 31 | +Use the loader either via your webpack config, CLI or inline. |
| 32 | + |
| 33 | +### Via webpack config (recommended) |
| 34 | + |
| 35 | +**webpack.config.js** |
| 36 | + |
| 37 | +```js |
| 38 | +const production = false; |
| 39 | + |
| 40 | +const cssUseList = ["style-loader", "css-loader"]; |
| 41 | + |
| 42 | +if (production) { |
| 43 | + cssUseList.push("clean-css-loader"); |
| 44 | + // or with options |
| 45 | + cssUseList.push({ |
| 46 | + loader: "clean-css-loader", |
| 47 | + options: { |
| 48 | + compatibility: "ie9", |
| 49 | + level: 2, |
| 50 | + inline: ["remote"] |
| 51 | + } |
| 52 | + }); |
| 53 | +} |
| 54 | + |
| 55 | +module.exports = { |
| 56 | + module: { |
| 57 | + rules: [ |
| 58 | + { |
| 59 | + test: /\.css$/, |
| 60 | + use: cssUseList |
| 61 | + } |
| 62 | + ] |
| 63 | + } |
| 64 | +}; |
| 65 | +``` |
| 66 | + |
| 67 | +**In your application** |
| 68 | + |
| 69 | +```js |
| 70 | +import cssMin from "style.css"; |
| 71 | +``` |
| 72 | + |
| 73 | +### CLI |
| 74 | + |
| 75 | +```bash |
| 76 | +webpack --module-bind 'css=style-loader!css-loader!clean-css-loader' |
| 77 | +``` |
| 78 | + |
| 79 | +**In your application** |
| 80 | + |
| 81 | +```js |
| 82 | +import cssMin from "style.css"; |
| 83 | +``` |
| 84 | + |
| 85 | +### Inline |
| 86 | + |
| 87 | +**In your application** |
| 88 | + |
| 89 | +```js |
| 90 | +import cssMin from "style-loader!css-loader!clean-css-loader!./style.css"; |
| 91 | +``` |
| 92 | + |
| 93 | +## Options |
| 94 | + |
| 95 | +### `skipWarn` default: `false` |
| 96 | + |
| 97 | +This option disable output warnings |
| 98 | + |
| 99 | +More option: [https://github.com/jakubpawlowicz/clean-css#constructor-options](https://github.com/jakubpawlowicz/clean-css#constructor-options) |
| 100 | + |
| 101 | +## Webpack 1.x |
| 102 | + |
| 103 | +**Example config (for webpack 1.x):** |
| 104 | + |
| 105 | +```js |
| 106 | +module.exports = { |
| 107 | + module: { |
| 108 | + loaders: [ |
| 109 | + { |
| 110 | + test: /\.css$/, |
| 111 | + loader: "css!clean-css" |
| 112 | + }, |
| 113 | + { |
| 114 | + test: /\.styl$/, |
| 115 | + loader: "css!clean-css!stylus?reslve url" |
| 116 | + } |
| 117 | + //... |
| 118 | + ], |
| 119 | + // Example Set options (Key "clean-css" or cleancss or CleanCSS): |
| 120 | + "clean-css": { |
| 121 | + debug: true, |
| 122 | + mediaMerging: true |
| 123 | + } |
| 124 | + } |
| 125 | +}; |
| 126 | +``` |
0 commit comments