1

我正在使用Webpack、Extract Text Plugin和PostCSS来生成我的 CSS 包。我使用Html Webpack Plugin生成index.html文件。这是我的webpack.config.js：

// imports

module.exports = {
  // entry point, etc.
  module: {
    loaders: [
      // other loaders here
      {
        test: /\.scss/,
        loader: debug ? 'style-loader!css-loader!postcss-loader!sass-loader' :
          ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' })
      },
      {
        test: /\.css$/,
        loader: debug ? 'style-loader!css-loader!postcss-loader' :
          ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader' })
      },
    ]
  },
  plugins: [
    // other plugins here
    new ExtractTextPlugin('css/bundle.min.css'),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
    new HtmlWebpackPlugin({
      template: './dev/index.ejs',
    }),
  ],
};

我的postcss.config.js：

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-object-fit-images'),
    require('oldie')({
      opacity: {
        method: 'copy'
      },
      rgba: {
        method: 'clone'
      }
    })
  ]
};

我设置了 RGBA 和不透明度选项来复制原始规则。我尝试对 UnMQ 做同样的事情（postcss 删除 IE 的媒体查询），但找不到任何复制原始媒体查询的选项。我也尝试禁用它：

require('oldie')({
  opacity: {
    method: 'copy'
  },
  rgba: {
    method: 'clone'
  },
  unmq: {
    disable: true
  }
})

除非我从postcss.config.js. 现在我想尝试为 IE 生成一个单独的 CSS 包，并将其包含在index.html类似于Oldie网站上给出的示例中：

<!--[if gt IE 8]><!--><link href="style.css" rel="stylesheet"><!--<![endif]-->
<!--[if lte IE 8]><link href="style.oldie.css" rel="stylesheet"><![endif]-->

如果这是不可能的，请提出另一种方法，我可以让 Oldie 为 IE 工作，但不影响支持它的其他浏览器的媒体查询。

4

1 回答 1

0

添加预设。

创建postcss.config.js文件。

配置以下内容以允许转译：

module.exports = {
    plugins: [
        require("postcss-preset-env")
    ]
};

但是，除非您创建了浏览器列表并添加了目标浏览器，否则它不会起作用。

所以，创建一个.browserslistrc文件。

配置如下或其他：

last 2 versions
>1%
ie11
maintained node versions
not dead

应该这样做。

总之，您不需要 Oldie。虽然，如果你想使用该模块，Gulp 会使用它，这是另一种设置。Webpack 已经很简单了。

让我知道事情的后续！:)

于 2021-02-25T07:17:35.880 回答