V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
DKrookie
V2EX  ›  前端开发

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

  •  
  •   DKrookie · 2022-06-01 15:10:11 +08:00 · 978 次点击
    这是一个创建于 697 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在 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 条回复    2022-06-02 00:44:20 +08:00
    gouflv
        1
    gouflv  
       2022-06-01 15:28:18 +08:00 via iPhone
    1. 这个项目停止维护了
    2. 所以为什么不用 less ?
    DKrookie
        2
    DKrookie  
    OP
       2022-06-01 15:31:58 +08:00
    @gouflv 我看 npmjs 上 12 天前才更新了啊,我想着也就用个嵌套,既然能用 css 搞定就试试,结果还是有问题。
    gouflv
        3
    gouflv  
       2022-06-02 00:44:20 +08:00 via iPhone
    sorry ,看错 repo 了。
    global 、local 应该属于是 css modules 的概念,至少在他的文档里没有体现。

    其实就好像 scss less 里面是用 @root 一样,都是自定标准,css 本身并不支持
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1261 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:51 · PVG 01:51 · LAX 10:51 · JFK 13:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.