Question

我使用带有postcss的webpack2来处理样式：

// 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获胜。要解决这个问题，所有的重置应该是＃34;悬挂＆＃34;像这样：

<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类自动重置它们。

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

1 个答案: