blocks|key|4384126|text|不再需要使用LoaderOptionsPlugin。现在，您可以将选项直接传递给加载器声明。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4384127|const+autoprefixer+=+require('autoprefixer');

let+settings+=+{
++++/*...*/
++++module:+{
++++++++rules:+[{
++++++++++++test:+/\.css$/,
++++++++++++use:+[
++++++++++++++++/*...other+loaders...*/
++++++++++++++++{
++++++++++++++++++++loader:+'postcss-loader',
++++++++++++++++++++options:+{
++++++++++++++++++++++++plugins:+function+()+{
++++++++++++++++++++++++++++return+[autoprefixer]
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++}
++++++++++++++++/*...other+loaders...*/
++++++++++++]
++++++++}]}+++++++++
++++}
++++/*...*/
};|code-block|syntax|javascript|4384128|如果需要提供具体的兼容性配置，可以将其作为参数传递给autoprefixer函数：|4384129|options:+{
++++plugins:+function+()+{
++++++++return+[autoprefixer('last+2+versions',+'ie+10')]
++++}
}|4384130|entityMap^0|6|J|0|0|Q|C|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

There is no more need to use <code>LoaderOptionsPlugin</code>. Now you can pass options directly to the loader declaration.

<pre><code>const autoprefixer = require('autoprefixer');

let settings = {
 /*...*/
 module: {
 rules: [{
 test: /\.css$/,
 use: [
 /*...other loaders...*/
 {
 loader: 'postcss-loader',
 options: {
 plugins: function () {
 return [autoprefixer]
 }
 }
 }
 /*...other loaders...*/
 ]
 }]} 
 }
 /*...*/
};
</code></pre>

In case if you need to provide specific compatibility configuration, you can pass it as argument to <code>autoprefixer</code> function:

<pre><code>options: {
 plugins: function () {
 return [autoprefixer('last 2 versions', 'ie 10')]
 }
}
</code></pre>

blocks|key|4384177|text|截至2017年7月20日，为了使用Webpack+v2.4.1设置Autoprefixer，我执行了以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4384178|安装必要的加载器：|4384179|yarn+add+-D+postcss-loader+autoprefixer+style-loader+sass-loader+css-loader|code-block|syntax|javascript|4384180|在项目的根目录下创建一个postcss.config.js文件：|4384181|module.exports+=+{
++plugins:+[
++++require('autoprefixer')
++]
};|4384182|在根级package.json中，指定要支持的浏览器：|offset|length|style|CODE|4384183|"browserslist":+["defaults",+"not+ie+<+11"]|4384184|在您的webpack.config.js文件的module.rules中，使用postcss-loader在css-loader后面指定您的加载器(我也使用scss)：|4384185|++{
++++test:+/\.scss$/,
++++use:+[
++++++{
++++++++loader:+'style-loader'+//+Adds+CSS+to+the+DOM+by+injecting+a+<style>+tag
++++++},
++++++{
++++++++loader:+'css-loader'+//++interprets+@import+and+url()+like+import/require()+and+will+resolve+them.
++++++},
++++++{
++++++++loader:+'postcss-loader',+//+postcss+loader+so+we+can+use+autoprefixer
++++++++options:+{
++++++++++config:+{
++++++++++++path:+'postcss.config.js'
++++++++++}
++++++++}
++++++},
++++++{
++++++++loader:+'sass-loader'+//+compiles+Sass+to+CSS
++++++}
++++],
++},|4384186|entityMap^0|0|0|0|0|0|3|C|0|0|3|H|N|C|13|E|1I|A|26|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@$O|16|P|17|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|19|8|@$O|1A|P|1B|Q|R]|$O|1C|P|1D|Q|R]|$O|1E|P|1F|Q|R]|$O|1G|P|1H|Q|R]|$O|1I|P|1J|Q|R]]|9|@]|A|$]]|$1|W|3|X|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|Y|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|Z|$]]

As of July 20, 2017 to set up Autoprefixer with Webpack v2.4.1 I did the following:

Install necessary loaders:

<pre><code>yarn add -D postcss-loader autoprefixer style-loader sass-loader css-loader
</code></pre>

create a postcss.config.js file in the root directory of your project:

<pre><code>module.exports = {
 plugins: [
 require('autoprefixer')
 ]
};
</code></pre>

In your root level <code>package.json</code> specify browsers you want to support:

<pre><code>"browserslist": ["defaults", "not ie &lt; 11"]
</code></pre>

In your <code>webpack.config.js</code> file's <code>module.rules</code> specify your loaders with the <code>postcss-loader</code> following the <code>css-loader</code> (I'm also using <code>scss</code>):

<pre><code> {
 test: /\.scss$/,
 use: [
 {
 loader: 'style-loader' // Adds CSS to the DOM by injecting a &lt;style&gt; tag
 },
 {
 loader: 'css-loader' // interprets @import and url() like import/require() and will resolve them.
 },
 {
 loader: 'postcss-loader', // postcss loader so we can use autoprefixer
 options: {
 config: {
 path: 'postcss.config.js'
 }
 }
 },
 {
 loader: 'sass-loader' // compiles Sass to CSS
 }
 ],
 },
</code></pre>

How to use <code>autoprefixer</code> with webpack 2.x. 

Previously, it used to be something like this...

<pre><code>...

module: {
 loaders: [
 {
 test: /\.scss$/,
 loader: 'style!css!sass!postcss'
 }
 ]
},
postcss: () =&gt; {
 return [autoprefixer]
},

...
</code></pre>

But, it's not working anymore. 

How to rewrite it to webpack@2.x.x?

Using autoprefixer with postcss in webpack 2.x

如何在webpack 2.x中使用autoprefixer。以前，通常是这样的……...module: {  loaders: [     {       test: /\.scss$/,        loader: 'style!css!sass!postcss'     }   ]},postcss: () =>...

问在webpack 2.x中将自动修复程序与postcss一起使用
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在webpack 2.x中将自动修复程序与postcss一起使用EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在webpack 2.x中将自动修复程序与postcss一起使用
EN