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

2022-06-01 15:10:11 +08:00
 DKrookie

我在 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"
	]
}

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

1000 次点击
所在节点    前端开发
3 条回复
gouflv
2022-06-01 15:28:18 +08:00
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
sorry ,看错 repo 了。
global 、local 应该属于是 css modules 的概念,至少在他的文档里没有体现。

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/856725

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX