CSS模块（本地模块）

浏览器原生支持的CSS模块，实际上被称为“CSS模块脚本”。这与流行的开源项目不同，后者通过在HTML和CSS中创建唯一的类名标识符来实现作用域样式。

原生CSS模块是ES模块的一部分（很像我们最近介绍的JSON模块）：

// 常规ES模块
import React from "https://cdn.skypack.dev/[email protected]";

// 新式JSON模块
import configData from './config-data.json' assert { type: 'json' };

// 新式CSS模块
import styleSheet from "./styles.css" assert { type: "css" };

我第一次看到这个是从Justin的推文中：

目前，这只是Chrome浏览器的一个特性。相关链接：

• 意图实现：CSS模块V1
• Chrome平台状态：CSS模块脚本
• GitHub/WhatWG：引入CSS模块脚本

在我撰写本文时，它仅在启用实验性Web平台功能的Chrome Canary中有效。如果您想问，“我什么时候可以在生产项目中使用它，而这些项目的用户使用各种各样的浏览器呢？”我会说：我不知道。可能需要数年时间。也许永远不会。但这仍然很有趣。也许支持会快速发展。也许你会在一个Electron项目或其他你可以依赖特定浏览器功能的项目上工作。

这看起来像是可构造样式表的扩展，它们也仅限于Chrome浏览器，因此在这方面“落后”的浏览器必须从那里开始。

我在这里尝试了Justin的想法：

如果我记录从CSS模块导入中获得的内容，它是一个CSSStyleSheet：

如果您要实际使用样式……那取决于您。Justin的想法基本上将样式作为一个单行代码应用，因为它碰巧lit-html支持CSSStyleSheet（这些文档没有明确说明这一点，但我认为他们会在某个时候说明）。对于原生Web组件，差别不大：您导入它，获取CSSStyleSheet，然后将其应用于Web组件，例如：

this.shadowRoot.adoptedStyleSheets = [myCSSStyleSheet];

我认为这一切的意义在于：

• 我们需要一种在JavaScript中导入样式表的方法，而这基本上是我所知道的第一个真正清晰的方法，
• 现在，如果我们想的话，我们可以对CSS进行编程访问以进行操作，
• 它对于Web组件的使用看起来特别好，但它是通用的。一旦拥有样式表，就可以随意使用它。

以上是CSS模块（本地模块）的详细内容。更多信息请关注PHP中文网其他相关文章！