Chrome 99新特性：@layers 规则浅析

背景CSS 写多了，新特性l析就会觉得它不太好用，则浅经常会遇到各种问题... 比如:

「引入顺序导致的新特性l析样式竞争问题」

用过 ant design 等组件库 + 发布在 npm 上的业务组件 的同学，网站模板可能会经常遇到自定义样式不生效的则浅问题，比如像这样...

/* main.module.css */

.green {

color: green;

}

// main.tsx

import { Button } from antd ;

import antd/dist/antd.css ;

// @ts-ignore

import styles from ./main.module.css ;

import Nothing from packed-bad-component ;

export default function Component() {

const { green } = styles;

return (

<>

);

}

// bad-component.tsx,新特性l析 published as packed-bad-component

import { Button } from antd ;

import antd/dist/antd.css?uncached ;

export default function Nothing() {

return null;

}

按钮中的文字是什么颜色? 可以点击这里试试：https://codesandbox.io/embed/bad-case-css-priority-xs3ds?fontsize=14&hidenavigation=1&theme=dark

这是服务器托管因为，如果发布的则浅组件引入了 ant design 的样式，就会被打包

新特性l析香港云服务器