Question

我一直在尝试使用LESS和Autoprefixer配置webpack，但autoprefixer似乎不起作用。我的css或更少的文件不是自动反射的。例： var ch:Vector.<Channel>=new Vector.<Channel>(); ch.push(new Channel()); function onSampleData(e:SampleDataEvent):void { for (var j:int=0;j<8192;j++) { // here to input code that can alter channels' freqs, volumes etc var sd:Number=0; for (var i:int=ch.length-1; i>=0;i--) { sd+=ch[i].generateNextSample(); } e.data.writeFloat(sd); e.data.writeFloat(sd); } }保留display: flex

我已将我的webpack配置放在下面：

display: flex

Answer 1

所以发现了问题。傻我，postcss块需要直接在webpack配置下，我把它放在模块块中。我的坏。

编辑：这应该是这样的：

secs <- c("RXU6 Comdty", "TYU6 Comdty", "SHSZ300 INDEX")
flds <- c("LAST_PRICE")
subscribe(secs,flds, fun = parseResponse)

parseResponse <- function (x) {
   if (x$event.type == "SUBSCRIPTION_DATA") {
      s <- as.character(x$data$TRADE_UPDATE_STAMP_RT)
      if (!is.null(s)) {
            if (length(s)>0) {
                  ts <- as.POSIXct(s)
                  if ((ts > beg.time) & (ts < end.time)) {
                      print(x$data$EVENT_TIME)
                      print(x$data$LAST_PRICE)
                  }
            }
      }
   }
}

[1] 132.7188
[1] "15:27:16"
[1] 166.15
[1] "15:27:16"
[1] 166.15
[1] "15:27:16"
[1] 166.15
[1] "15:27:16"
[1] 132.7344

因此，不必将其放在模块块中，我必须将其直接放在主块下面，如上所示。

Answer 2

如Autoprefixer documentation所述，“自动前缀使用浏览器列表”

根据Browserslist documentation，建议将浏览器列表放在package.json中。

因此，这是另一种将自动前缀与webpack一起使用的方法：

安装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 documentation，postcss-loader应该放在css-loader和style-loader之后，但要放在其他{{1 }}（如果您使用的话）。

sass|less|stylus-loader

package.json

通过这种方式，您不需要"postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "last 2 version", "not dead", "iOS >= 9" ]文件。

Answer 3

您需要在webpack配置中为较旧的浏览器版本设置postcss。

autoprefixer的默认值是拥有至少5％市场份额的浏览器或浏览器的最新2个版本。

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

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

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

Answer 4

我遇到与 Webpack 2.x.x 类似的问题，配置中不再允许自定义属性。我找到了另一个S.O帖子的解决方案：Using auto prefixer with postcss in webpack 2.0。如果由于某种未知原因，此链接将导致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所有。

使用webpack的css autoprefixer

4 个答案: