1 | # PostCSS for Webpack [![Build Status][ci-img]][ci]
|
2 |
|
3 | <img align="right" width="95" height="95"
|
4 | title="Philosopher’s stone, logo of PostCSS"
|
5 | src="http://postcss.github.io/postcss/logo.svg">
|
6 |
|
7 | [PostCSS] loader for [webpack] to postprocesses your CSS with [PostCSS plugins].
|
8 |
|
9 | <a href="https://evilmartians.com/?utm_source=postcss">
|
10 | <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
|
11 | alt="Sponsored by Evil Martians" width="236" height="54">
|
12 | </a>
|
13 |
|
14 | [PostCSS plugins]: https://github.com/postcss/postcss#plugins
|
15 | [PostCSS]: https://github.com/postcss/postcss
|
16 | [webpack]: http://webpack.github.io/
|
17 | [ci-img]: https://travis-ci.org/postcss/postcss-loader.svg
|
18 | [ci]: https://travis-ci.org/postcss/postcss-loader
|
19 |
|
20 | ## Install
|
21 |
|
22 | ```sh
|
23 | npm install postcss-loader --save-dev
|
24 | ```
|
25 |
|
26 | ## Usage
|
27 |
|
28 | Create `postcss.config.js`:
|
29 |
|
30 | ```js
|
31 | module.exports = {
|
32 | plugins: [
|
33 | require('postcss-smart-import')({ /* ...options */ }),
|
34 | require('precss')({ /* ...options */ }),
|
35 | require('autoprefixer')({ /* ...options */ })
|
36 | ]
|
37 | }
|
38 | ```
|
39 |
|
40 | You could put different configs in different directories. For example,
|
41 | global config in `project/postcss.config.js` and override its plugins
|
42 | in `project/src/legacy/postcss.config.js`.
|
43 |
|
44 | You can read more about common PostCSS config in
|
45 | [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config).
|
46 |
|
47 | Add PostCSS Loader to `webpack.config.js`. Put it after `css-loader`
|
48 | and `style-loader`. But before `sass-loader`, if you use it.
|
49 |
|
50 | ### Webpack 2
|
51 |
|
52 | ```js
|
53 | module.exports = {
|
54 | module: {
|
55 | rules: [
|
56 | {
|
57 | test: /\.css$/,
|
58 | use: [
|
59 | 'style-loader',
|
60 | 'css-loader?importLoaders=1',
|
61 | 'postcss-loader'
|
62 | ]
|
63 | }
|
64 | ]
|
65 | }
|
66 | }
|
67 | ```
|
68 |
|
69 | ### Webpack 1
|
70 |
|
71 | ```js
|
72 | module.exports = {
|
73 | module: {
|
74 | loaders: [
|
75 | {
|
76 | test: /\.css$/,
|
77 | loaders: [
|
78 | 'style-loader',
|
79 | 'css-loader?importLoaders=1',
|
80 | 'postcss-loader'
|
81 | ]
|
82 | }
|
83 | ]
|
84 | }
|
85 | }
|
86 | ```
|
87 |
|
88 | ## Options
|
89 |
|
90 | ### Plugins
|
91 |
|
92 | We recommend to use `postcss.config.js`, but also you can specify plugins
|
93 | directly in webpack config.
|
94 |
|
95 | #### Webpack 2
|
96 |
|
97 | ```js
|
98 | module.exports = {
|
99 | module: {
|
100 | rules: [
|
101 | {
|
102 | test: /\.css/,
|
103 | use: [
|
104 | …
|
105 | {
|
106 | loader: 'postcss-loader',
|
107 | options: {
|
108 | plugins: function () {
|
109 | return [
|
110 | require('precss'),
|
111 | require('autoprefixer')
|
112 | ];
|
113 | }
|
114 | }
|
115 | }
|
116 | ]
|
117 | }
|
118 | ]
|
119 | }
|
120 | }
|
121 | ```
|
122 |
|
123 | #### Webpack 1
|
124 |
|
125 | ```js
|
126 | module.exports = {
|
127 | module: {
|
128 | loaders: [
|
129 | {
|
130 | test: /\.css$/,
|
131 | loaders: [
|
132 | …
|
133 | 'postcss-loader'
|
134 | ]
|
135 | }
|
136 | ]
|
137 | },
|
138 | postcss: () => {
|
139 | return [
|
140 | require('precss'),
|
141 | require('autoprefixer')
|
142 | ];
|
143 | }
|
144 | }
|
145 | ```
|
146 |
|
147 | ### Syntaxes
|
148 |
|
149 | PostCSS can transforms styles in any syntax, not only in CSS.
|
150 | There are 3 parameters to control syntax:
|
151 |
|
152 | * `syntax` accepts module name with `parse` and `stringify` function.
|
153 | * `parser` accepts module name with input parser function.
|
154 | * `stringifier` accepts module name with output stringifier function.
|
155 |
|
156 | ```js
|
157 | module.exports = {
|
158 | module: {
|
159 | loaders: [
|
160 | {
|
161 | test: /\.sss/,
|
162 | loaders: [
|
163 | 'style-loader',
|
164 | 'css-loader?importLoaders=1',
|
165 | 'postcss-loader?parser=sugarss'
|
166 | ]
|
167 | }
|
168 | ]
|
169 | }
|
170 | }
|
171 | ```
|
172 |
|
173 | ### SourceMaps
|
174 |
|
175 | Loader will use source map settings from previous loader.
|
176 |
|
177 | You can set this `sourceMap` parameter to `inline` value to put source maps
|
178 | into CSS annotation comment:
|
179 |
|
180 | ```js
|
181 | module.exports = {
|
182 | module: {
|
183 | loaders: [
|
184 | {
|
185 | test: '\/.css',
|
186 | loaders: [
|
187 | 'style-loader',
|
188 | 'css-loader?importLoaders=1',
|
189 | 'postcss-loader?sourceMap=inline'
|
190 | ]
|
191 | }
|
192 | ]
|
193 | }
|
194 | }
|
195 | ```
|
196 |
|
197 | ## Examples
|
198 |
|
199 | ### CSS Modules
|
200 |
|
201 | This loader [cannot be used] with [CSS Modules] out of the box due
|
202 | to the way `css-loader` processes file imports. To make them work properly,
|
203 | either add the css-loader’s [`importLoaders`] option
|
204 |
|
205 | ```js
|
206 | …
|
207 | {
|
208 | test: /\.css$/,
|
209 | loaders: [
|
210 | 'style-loader',
|
211 | 'css-loader?modules&importLoaders=1',
|
212 | 'postcss-loader'
|
213 | ]
|
214 | }
|
215 | …
|
216 | ```
|
217 | or use [postcss-modules] plugin instead of `css-loader`.
|
218 |
|
219 |
|
220 | [`importLoaders`]: https://github.com/webpack/css-loader#importing-and-chained-loaders
|
221 | [postcss-modules]: https://github.com/outpunk/postcss-modules
|
222 | [cannot be used]: https://github.com/webpack/css-loader/issues/137
|
223 | [CSS Modules]: https://github.com/webpack/css-loader#css-modules
|
224 |
|
225 | ### JS Styles
|
226 |
|
227 | If you want to process styles written in JavaScript
|
228 | you can use the [postcss-js] parser.
|
229 |
|
230 | ```js
|
231 | …
|
232 | {
|
233 | test: /\.style.js$/,
|
234 | loaders: [
|
235 | 'style-loader',
|
236 | 'css-loader?modules&importLoaders=1',
|
237 | 'postcss-loader?parser=postcss-js',
|
238 | 'babel'
|
239 | ]
|
240 | }
|
241 | …
|
242 | ```
|
243 |
|
244 | As result you will be able to write styles as:
|
245 |
|
246 | ```js
|
247 | import colors from './config/colors'
|
248 |
|
249 | export default {
|
250 | '.menu': {
|
251 | color: colors.main,
|
252 | height: 25,
|
253 | '&_link': {
|
254 | color: 'white'
|
255 | }
|
256 | }
|
257 | }
|
258 | ```
|
259 |
|
260 | > If you are using Babel >= v6 you need to do the following in order for the setup to work
|
261 |
|
262 | > 1. Add [babel-plugin-add-module-exports] to your configuration
|
263 | > 2. You need to have only one **default** export per style module
|
264 |
|
265 | If you use JS styles without `postcss-js` parser, you can add `exec` parameter:
|
266 |
|
267 | ```js
|
268 | …
|
269 | {
|
270 | test: /\.style.xyz$/,
|
271 | loaders: [
|
272 | 'style-loader',
|
273 | 'css-loader?modules&importLoaders=1',
|
274 | 'postcss-loader?parser=custom-parser&exec'
|
275 | ]
|
276 | }
|
277 | …
|
278 | ```
|
279 |
|
280 | [postcss-js]: https://github.com/postcss/postcss-js
|
281 | [babel-plugin-add-module-exports]: https://github.com/59naga/babel-plugin-add-module-exports
|
282 |
|
283 | ### Dynamic Config
|
284 |
|
285 | PostCSS loader sends a loaded instance to PostCSS common config.
|
286 | You can use it to do some real magic:
|
287 |
|
288 | ```js
|
289 | module.exports = function (ctx) {
|
290 | if (check(ctx.webpack.resourcePath)) {
|
291 | return { plugins: plugins1 };
|
292 | } else {
|
293 | return { plugins: plugins2 };
|
294 | }
|
295 | }
|
296 | ```
|
297 |
|
298 | ### Webpack Events
|
299 |
|
300 | Webpack provides webpack plugin developers a convenient way
|
301 | to hook into the build pipeline. The postcss-loader makes use
|
302 | of this event system to allow building integrated postcss-webpack tools.
|
303 |
|
304 | See the [example] implementation.
|
305 |
|
306 | Event `postcss-loader-before-processing` is fired before processing and allows
|
307 | to add or remove postcss plugins.
|
308 |
|
309 | [example]: https://github.com/postcss/postcss-loader/blob/master/test/webpack-plugins/rewrite.js
|