使用Webpack实现CSS自动添加浏览器前缀

Question

使用Webpack实现CSS自动添加浏览器前缀

22

我一直在尝试使用LESS和Autoprefixer配置webpack，但是Autoprefixer似乎不起作用。我的CSS或LESS文件没有被自动添加前缀。例如：display: flex保持不变。

下面是我的webpack配置：

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    bundle: "./index.jsx"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      }

    ],
    postcss: function () {
      return [autoprefixer];
    }
  },
  plugins: [
    new webpack.BannerPlugin(banner),
    new ExtractTextPlugin("style.css")
  ],
  devtool: 'source-map',
  devServer: {
    stats: 'warnings-only',
  }
};

- wrick17

4个回答

7

所以问题找到了。我太傻了，postcss块需要直接放在webpack配置下面，我把它放在modules块里了。我的错。

编辑：应该像这样：

var autoprefixer = require('autoprefixer');

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer];
    }
    ...
};

所以，我不得不像上面展示的那样，将它直接放在主块下面，而不是放在模块块内部。

- wrick17

4

如果你需要支持旧版浏览器，你需要在webpack配置中设置postcss。

autoprefixer的默认设置是支持最新的两个浏览器版本或市场份额达到5%以上的浏览器。

https://github.com/postcss/autoprefixer#browsers

  postcss: [
    autoprefixer({
      browsers: ['last 3 versions', '> 1%']
    })
  ],

它表示您支持最近3个版本的浏览器或市场份额至少为1％的浏览器。

- Marcel Mandatory

没有抛出任何错误哈希值：d630b9d8e940465f3b07 版本：webpack 1.13.1 时间：1772毫秒资源大小块块名称 bundle.js 708 kB 0 [emitted] bundle bundle.js.map 816 kB 0 [emitted] bundle + 171 隐藏模块 - wrick17

我认为值得一提的是，webpack 2不再允许在配置中使用自定义属性。 - theFreedomBanana

1

我遇到了与Webpack 2.x.x相关的类似问题，自定义属性不再允许在配置中使用。我在另一个S.O帖子上找到了解决方案：在Webpack 2.0中使用autoprefixer和postcss。如果由于某些未知原因此链接导致404错误，我在此编译了最相关的答案：

Webpack 2.x.x引入了webpack.LoaderOptionsPlugin()插件，您需要在此处定义所有加载器选项插件。例如，autoprefixer是postcss-loader的插件。所以，它必须放在这里。新配置应如下所示：

module: {
  rules: [
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader', 
      'postcss-loader']
    }
  ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
    }
  })
],

这对我有帮助，但正如Kreig所提到的，不需要使用LoaderOptionsPlugin()。现在可以直接将选项传递给加载器声明：

const autoprefixer = require('autoprefixer');

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

事实是我尝试过使用Webpack 2.5.1进行第二次操作，但失败了。感谢Pranesh Ravi和Kreig。

- theFreedomBanana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- antoni · Accepted Answer

如Autoprefixer文档所述，“Autoprefixer使用Browserslist”

根据Browserslist文档的建议，在package.json中放置browserslist。

因此，以下是另一种使用webpack和autoprefixer的方法:

安装postcss-loader和autoprefixer：

npm i -D postcss-loader autoprefixer

webpack.config.js

module: {
  rules: [
    {
      test: /\.scss$/,
      exclude: /node_modules/, 
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    },
    { 
      test: /\.css$/, 
      use: ['style-loader', 'css-loader', 'postcss-loader'] 
    },
    ...
  ]
}

根据postcss文档，postcss-loader应该在css-loader和style-loader之后，但在其他预处理器加载程序（例如sass | less | stylus-loader）之前使用（如果您使用任何这些程序）。

package.json

"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},
"browserslist": [
  "last 2 version",
  "not dead",
  "iOS >= 9"
]

通过这种方式，您无需使用 postcss.config.js 文件。