ExtractTextPlugin 和 postCSS - autoprefixer 不工作

Question

我正在尝试设置 webpack 以进行编译，它扫描一个文件树中的所有 css 文件，然后生成一个 css 文件，其中包含所有样式的捆绑、自动前缀和最小化.

我无法使用 autoprefixer 插件。

这里是相关的 webpack 配置部分：

const webpack = require('webpack')
const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// postCSS plugins
const autoprefixer = require('autoprefixer')

module.exports = [
{
  // another compilation pass
},
{
  name: 'static-css',
  entry: {
    vendor: glob.sync(path.join(__dirname, 'assets/stylesheets/vendor/**/*.css')),
    styles: glob.sync(path.join(__dirname, 'assets/stylesheets/src/**/*.css'))
  },
  devtool: 'source-map',
  output: {
    path: path.join(__dirname, 'assets/stylesheets/build/'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      // css loader for custom css
      {
        test: /\.css$/,
        include: path.join(__dirname, 'assets/stylesheets/src'),
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      },
      // css loader for vendor css
      {
        test: /\.css$/,
        include: path.join(__dirname, 'assets/stylesheets/vendor'),
        loader: 'style-loader!css-loader'
      },
      // other loaders for images, fonts, and svgs
      {
        test: /\.png$/,
        loader: 'url-loader?limit=100000'
      },
      {
        test: /\.jpg$/,
        loader: 'file-loader'
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }
    ],
    postcss: function() {
      return [
        autoprefixer
      ]
    }
  },
  plugins: [
    // extract css in a .css file
    new ExtractTextPlugin('[name].css')
  ]
}
];

当我运行 webpack 时，我将所有文件压缩在 bundle.js 中，并在单独的 styles.css 文件中正确提取。但是没有应用供应商前缀。

我正在使用这个 class 来测试前缀：

.autoprefixer-test {
  display: flex;
  transition: all .5s;
  background: linear-gradient(to bottom, white, black);
  user-select: none;
}

我曾尝试将调用更改为 ExtractTextPlugin.extract，就像在其他帖子中看到的 ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader']) 一样，但它根本没有帮助。

有什么想法吗？

Answer 1

您似乎放错了 postcss 参数。根据 https://github.com/postcss/postcss-loader 上的文档，以下代码应放在配置的顶层，而不是 module 部分下：

postcss: function() {
  return [
    autoprefixer
  ]
}

更新。

事实上，要使 postcss 和 webpack 的集成工作，需要编写更多的配置。感谢以下线程，我找到了解决方案 https://github.com/postcss/postcss-loader/issues/8

首先，为了 postcss 能够处理 @import 编辑的文件，需要使用 postcss-import 插件。为了将此插件与 webpack 集成（例如，启用文件监视以进行热重载或重建），从初始化程序的函数参数中获取的特殊参数作为参数传递给 postcssImport，如下所示：

var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
....
postcss: function(webpack) {
  return [
    postcssImport({ addDependencyTo: webpack }), // should be first
    autoprefixer
  ];
]

遗憾的是，当使用 url(...) 和相对路径时，这会中断通过 webpack 加载资产。发生这种情况是因为 postcss-import 将所有 @import 编辑的文件合并为一个，但路径仍然相对于文件初始目录。为了重写相对路径，应该使用 postcss-url 插件，现在的配置如下所示：

var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
var postcssUrl = require('postcss-url');
....
postcss: function(webpack) {
  return [
    postcssImport({ addDependencyTo: webpack }),
    postcssUrl(),
    autoprefixer
  ];
]

ExtractTextPlugin 和 postCSS - autoprefixer 不工作

ExtractTextPlugin and postCSS - autoprefixer not working

webpack

autoprefixer

postcss

webpack-plugin