将 autoprefixer 添加到 webpack 2.2.1

Question

我正在尝试将 autoprefixer 添加到 webpack 2.2.1，但在查看前缀时遇到问题。我安装了 postcss-loader https://github.com/postcss/postcss-loader 因为这似乎是在 webpack 中处理 postcss 的列出方式。

我目前正在使用 scss 文件，我正在将这些文件导入到我的 React 文件中。示例：从 '../../styles/header.scss' 导入样式；这是在 webpack 中使用 sass-loader 处理的。

我的设置没有收到任何错误，但我也没有看到我的文件有任何自动预修复？我认为这只需要在开发而不是生产中添加？

这是我的开发设置 webpack 配置。

const path = require('path')
const webpack = require('webpack')

const ROOT_DIR = path.resolve(__dirname, '../app')

    module.exports = {
      devtool: 'eval',

      entry: [
        `${ROOT_DIR}/js/index`,
        'webpack-hot-middleware/client'
      ],

      output: {
        path: path.resolve(__dirname, '../public'),
        filename: 'bundle.js',
        publicPath: '/public/'
      },

      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
          "config.ASSET_URL": JSON.stringify(process.env.ASSETS_URL),
          "config.GA_TRACKING_ID": JSON.stringify(process.env.GA_TRACKING_ID)
        })
      ],
      module: {
        loaders: [
          { test: /\.js?$/,
            loader: 'babel-loader',
            include: path.join(__dirname, '../app'),
            exclude: /node_modules/
          },
          { test: /\.scss?$/,
            include: path.join(__dirname, '../app', 'styles'),
            use: [
               'style-loader',
               'css-loader',
               {
                 loader: 'postcss-loader',
                 options: { plugins: [
                     require('autoprefixer')
                 ] }
               },
               {
                 loader: 'sass-loader',
                 options: {
                   data: "$assetPath: '" + process.env.ASSETS_URL + "';"
                 }
               }
             ]
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            include : path.join(__dirname, '../app', 'images'),
            loader  : 'file-loader?limit=30000&name=[name].[ext]'
          },
          {
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            include : path.join(__dirname, '../app', 'fonts'),
            loader: 'file-loader?name=fonts/[name].[ext]'
          }
        ]
      }
    }

Answer 1

我最近有一个类似的事情要处理。如果您在 scss 文件的目录中创建一个单独的 postcss.config.js 文件并在其中

检查它是否有效

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

并在您的 webpack 配置中

  { test: /\.scss?$/,
    include: path.join(__dirname, '../app', 'styles'),
    use: [
       {loader: "style-loader"},
       {loader: "css-loader"},
       {loader: "postcss-loader"},
       {loader: "sass-loader",
         options: {
           data: "$assetPath: '" + process.env.ASSETS_URL + "';"
         }
       }
     ]
  },

将 autoprefixer 添加到 webpack 2.2.1

Adding autoprefixer to webpack 2.2.1

webpack-2

postcss

autoprefixer

postcss-loader