我在 vue 3 (vite) 中使用 postcss。这是我的配置:
包.json
"postcss-preset-env": "^7.8.3",
postcss.config.js
const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
plugins: [
postcssPresetEnv({
features: {
"nesting-rules": true,
"has-pseudo-class": true,
},
}),
],
};
嵌套按预期工作,所以我想我的配置是正确的
has-pseudo-class
在 Firefox 107 上什么都不做
我知道这是行不通的,因为以下代码在 Chromium(原生支持 :has
)上生成紫色边框,但在 Firefox 107 上没有任何内容:
.draggable:has(div) {
border: 1px solid purple !important;
}
我做错了什么?我是否误解了插件的功能或使用方法?
最佳答案
这不起作用,因为我需要导入和引导浏览器 polyfill。
为了解决这个问题,我在 HTML head 中添加了以下代码
<script src="https://unpkg.com/css-has-pseudo@4.0.1/dist/browser-global.js"></script>
<script>cssHasPseudo(document, { hover: true })</script>
请注意,您需要将浏览器 polyfill 与您正在使用的 postcss-preset-env
版本相匹配。
非常感谢 postcss discord chan 上非常乐于助人的人们帮助我解决这个问题。
关于javascript - 如何修复我的 postcss 配置,以便 ":has"插件工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74765129/