Question

我使用实质性的UI遇到了这个问题：要构建可在某些旧浏览器中运行的应用，需要在CSS前面加上前缀，例如：

idx > 100

我想要的是打包后应该自动添加一些兼容性：

tilesVector

我的css是这样创建的：

display:flex;

有人知道如何使它起作用吗？

Answer 1

您需要通过在项目根目录下创建一个postcss.config.js文件并定义导出来配置postcss

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // keep this first
    require('cssnano')({
      preset: 'default',
    }),
    require("autoprefixer")({
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',
      ]
    })
]};

确保您的webpack配置具有发布规则：

{
  test: /\.css$/,
  use: ["babel-loader", "raw-loader", "postcss-loader"]
},
{
  test: /\.s(a|c)ss$/,
  use: [
    "babel-loader", "raw-loader", "postcss-loader",
    {
      loader: "sass-loader",
      options: {
        includePaths: ["your/src/scss/style/file/location", "node_modules"]
          .map(d => require('path').join(__dirname, d))
          .map(g => require('glob').sync(g))
          .reduce((a, c) => a.concat(c), [])
      }
    }
  ]
}

我希望它对您有用。

使postcss与Material ui的js一起使用

1 个答案: