如何使用 postcss 和 webpack 处理全局样式转换

Question

我使用 webpack2 和 postcss 来处理样式：

// webpack.config.js
rules: [{
    test: /\.sss$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1,
          camelCase: 'only',
          localIdentName: '[name]_[local]_[hash:base64:4]',
          sourceMap: true,
        },
      },
      'postcss-loader',
    ],
}]

// postcss.config.js
plugins: {
    'postcss-autoreset': {},
}

如果我有两个 .css 文件

/* a.css */
.a {
    padding: 20px;
}

/* b.css */
.b {
    background-color: red;
}

它们将被转换成类似这样的东西（为了清楚起见，我省略了 css-modules 的名称）：

<style>
    /* transformed a.css content */
    .a {
        all: initial;
    }
    .a {
        padding: 20px;
    }
</style>

<style>
    /* transformed a.css content */
    .b {
        all: initial
    }
    .b {
        background-color: red;
    }
</style>

然后，如果我有 <div class="a b">blah</div> 之类的元素，则不会应用规则 padding: 20px;，因为为 .b 重置获胜。为了解决这个问题，所有的重置都应该像这样“提升”：

<style>
    .a,
    .b {
        all: initial;
    }
</style>

<style>
    .a {
        padding: 20px;
    }
</style>

<style>
    .b {
        background-color: red;
    }
</style>

这可能吗？

Answer 1

似乎这更像是一个与postcss-autoreset 插件相关的“问题”。我从未使用过它，这是我第一次看到它，但在快速阅读 Docs 之后，您似乎可以传递一个规则选择器（支持正则表达式），使其有条件地通过此插件运行。
例如：

postcss([ require('postcss-autoreset')({
  rulesMatcher: (rule)=> rule.selector.match(/[.reset]/)
})])  

然后您可以使用.reset css 类来自动重置它们。