Question

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

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

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

这是我的dev setup webpack config。

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

1 个答案: