@@ -33,7 +33,9 @@ module.exports = {
33
33
}
34
34
]
35
35
},
36
- postcss: [autoprefixer, csswring]
36
+ postcss : function {
37
+ return [autoprefixer, csswring];
38
+ }
37
39
}
38
40
```
39
41
@@ -44,6 +46,20 @@ var css = require('./file.css');
44
46
// => CSS after Autoprefixer and CSSWring
45
47
```
46
48
49
+ Note that the context of this function
50
+
51
+ ```js
52
+ module.exports = {
53
+ ...
54
+ postcss : function {
55
+ return [autoprefixer, csswring];
56
+ }
57
+ }
58
+ ```
59
+
60
+ will be set to the [webpack loader-context](http : // webpack.github.io/docs/loaders.html#loader-context).
61
+ If there is the need , this will let you access to webpack loaders API .
62
+
47
63
## Plugins Packs
48
64
49
65
If you want to process different styles by different PostCSS plugins you can
@@ -63,18 +79,24 @@ module.exports = {
63
79
}
64
80
]
65
81
},
66
- postcss: {
67
- defaults: [autoprefixer, csswring],
68
- cleaner: [autoprefixer ({ browsers: [] })]
82
+ postcss: function () {
83
+ return {
84
+ defaults: [autoprefixer, csswring],
85
+ cleaner: [autoprefixer({ browsers: [] })]
86
+ };
69
87
}
70
88
}
71
89
` ` `
72
90
73
- ## Plugins Function
91
+ ## Integration with postcss - import
92
+
93
+ When using [postcss - import ](https:// github.com/postcss/postcss-import) plugin, you may want to tell webpack about
94
+ dependencies coming from your ` @import` directives .
95
+ For example : in watch mode , to enable recompile on change .
74
96
75
- If you need to link any of the postcss plugins to the webpack context, you can
76
- define a function that returns your plugins. The function is executed with the
77
- same context provided to postcss-loader, allowing access to webpack loader API
97
+ Since the function in postcss section is executed with the [ webpack loader- context]( http : // webpack.github.io/docs/loaders.html#loader-context),
98
+ we can use the postcss - import callback [onImport](https: // github.com/postcss/postcss-import#onimport) to tell webpack what files
99
+ need to be watched .
78
100
79
101
` ` ` js
80
102
var cssimport = require('postcss-import');
@@ -90,12 +112,12 @@ module.exports = {
90
112
]
91
113
},
92
114
postcss: function () {
93
- // The context of this function is the same provided to postcss- loader
94
- // see: http://webpack.github.io/docs/loaders.html
115
+ // The context of this function is the webpack loader-context
116
+ // see: http://webpack.github.io/docs/loaders.html#loader-context
95
117
96
118
return [
97
119
cssimport({
98
- // see postcss-import docs to learn about onImport param
120
+ // see postcss-import docs to learn about onImport callback
99
121
// https://github.com/postcss/postcss-import
100
122
101
123
onImport: function (files) {
0 commit comments