使用 postcss-nesting 来支持 css 嵌套时使用全局作用域报错的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1229 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在 nestjs 中使用了 postcss-nesting 来支持 css 嵌套使用（不要问为什么不用 sass ），嵌套使用都没什么问题，但是当我想使用全局作用域声明一个全局规则时，报错了。代码如下

.a { font-size: 12px; :global { .xxxx { font-size: 14px; } } & :global(.xxxx) { font-size: 14px; } &:global { .xxxx { font-size: 14px; } } }

前面带上 & 不报错，但是也不生效。配置如下

{ "plugins": [ "postcss-flexbugs-fixes", [ "postcss-preset-env", { "autoprefixer": { "flexbox": "no-2009" }, "stage": 3, "features": { "custom-properties": false } } ], "postcss-nesting" ] }

有没有人遇到或者使用过类似的能帮我解答一下。谢谢

3 条回复

gouflv

2022-06-01 15:28:18 +08:00 via iPhone

1. 这个项目停止维护了
2. 所以为什么不用 less ？

DKrookie

2022-06-01 15:31:58 +08:00

@gouflv 我看 npmjs 上 12 天前才更新了啊，我想着也就用个嵌套，既然能用 css 搞定就试试，结果还是有问题。

gouflv

2022-06-02 00:44:20 +08:00 via iPhone

sorry ，看错 repo 了。
global 、local 应该属于是 css modules 的概念，至少在他的文档里没有体现。

其实就好像 scss less 里面是用 @root 一样，都是自定标准，css 本身并不支持