javascript - html 样式选择器在 webpack postcss 处理后保留

Question

我在我的 vue js ui 库项目中添加了带有选项的 postcss 加载器。我正在使用 postcss 加载器，这样当我在其他地方导入这个 npm 包时，样式不会冲突。Vue CLI 在内部使用 PostCSS。

我的示例 html：

<div id="navbackground ">
    <h5>Sample h5 text</h5>
</div>

我的 CSS 类之一，例如 mycolors.css，其中包含以下内容：

#navbackground {
  background: red;
}
h4{color:white}

postcss 的配置如下所示

  const prefixer = require('postcss-prefixer')

  css: {
    loaderOptions: {
        postcss: {
            plugins: [
                prefixer({
                    prefix: 'mystyles-'
                })
            ]
        }
    }
},

运行 webpack build 后生成的 css 文件如下所示，它应用了前缀。

#mystyles-navbackground {
  background: red;
}
h4{color:red}

正如您从上面看到的那样，h4 没有使用任何前缀标识符进行转换，并且 stlyes（例如 mystyles-navbackground）也没有应用于 html。

当我查看呈现的 html 时，它具有相同的类 ID（navbackground），因此它没有应用新的样式名称（mystyles-navbackground）

  <div id="navbackground ">
     <h5>Sample h5 text</h5>
  </div>

我是否需要运行另一个加载器或插件才能将新的前缀样式名称应用于 html ？

标签： javascripthtmlnode.jsvue.jswebpack