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

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 1436 days ago, the information mentioned may be changed or developed.

我在 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 replies