@@ -33,7 +33,9 @@ module.exports = {
3333 }
3434 ]
3535 },
36- postcss: [autoprefixer, csswring]
36+ postcss : function {
37+ return [autoprefixer, csswring];
38+ }
3739}
3840```
3941
@@ -44,6 +46,20 @@ var css = require('./file.css');
4446// => CSS after Autoprefixer and CSSWring
4547```
4648
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+
4763## Plugins Packs
4864
4965If you want to process different styles by different PostCSS plugins you can
@@ -63,18 +79,24 @@ module.exports = {
6379 }
6480 ]
6581 },
66- postcss: {
67- defaults: [autoprefixer, csswring],
68- cleaner: [autoprefixer ({ browsers: [] })]
82+ postcss: function () {
83+ return {
84+ defaults: [autoprefixer, csswring],
85+ cleaner: [autoprefixer({ browsers: [] })]
86+ };
6987 }
7088}
7189` ` `
7290
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 .
7496
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 .
78100
79101` ` ` js
80102var cssimport = require('postcss-import');
@@ -90,12 +112,12 @@ module.exports = {
90112 ]
91113 },
92114 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
95117
96118 return [
97119 cssimport({
98- // see postcss-import docs to learn about onImport param
120+ // see postcss-import docs to learn about onImport callback
99121 // https://github.com/postcss/postcss-import
100122
101123 onImport: function (files) {
0 commit comments