我的编程空间,编程开发者的网络收藏夹
学习永远不晚

一文教你如何像导入JS模块一样导入CSS

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

一文教你如何像导入JS模块一样导入CSS

前言

刚刚发布的 Chrome 93 版本中更新了一项令人兴奋的新特性:CSS Module Script,使用它你可以像导入一个 JavaScript 模块一样加载 CSS 样式。

然后,你可以将 CSS 样式与可构造样式表(Constructable Stylesheet) 相同的方式作用于 document 和 shadow dom,这比其他加载 CSS 的方式更方便、更高效。

什么是可构造样式表?

在了解 CSS Module Script 之前,我们先来了解下啥是可构造样式表(Constructable Stylesheet)。和表面意思一样,它是为了 CssStyleSheet 可直接构造而设计的,在 document 和 shadow dom 下都可以使用。

使用可构造样式表:

  • 通过 new CSSStyleSheet() 构造一个样式表
  • 改变可构造样式表
  • 通过 adoptedStyleSheets 使用可构造样式表

改变可构造样式表有如下API:

  • insertRule(rule,index) 往 cssRules 属性里插入 rule
  • deleteRule(rule,index) 从 cssRules 属性里删除 rule
  • replace(text) 异步替换 cssRules
  • replaceSync(text) 同步的 replace

// Construct the CSSStyleSheet
const stylesheet = new CSSStyleSheet();
 
// Add some CSS
stylesheet.replaceSync('body { background: #000 !important; }')
// OR stylesheet.replace, which returns a Promise instead
 
// Tell the document to adopt your new stylesheet.
// Note that this also works with Shadow Roots.
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];

使用 CSS Module Script

引入 CSS Module Script 将作用于 document 和 shadow dom,如下:


import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

CSS Module Script 默认导出的是一个 可构造样式表 ,与任何其他 可构造样式表 一样,它使用 adoptedstylesheet 作用于 document 和 shadow dom。

和其他使用 JavaScript 引入 CSS 的方式不同,你无需创建一个 <script> 标签,也不需要把 CSS 插入混淆后的 JavaScript 中。

CSS Module 也有像 JavaScript Module 一样的优点:

  • 重复数据删除:如果从应用的多个位置导入相同的 CSS 文件,它仍然只会被提取、实例化和解析一次。
  • 一致的顺序:如果导入一个 JavaScript 运行时,它可以依赖于已经解析过的样式表。
  • 安全性:模块使用 CORS 加载,并且使用严格的 MIME 类型检查。

导入断言(assert)是什么?

import 语句的 assert {type: 'css'} 部分是一个 import 断言,这是必需要声明的的;如果没有它,CSS 将被认为是一个普通的 JavaScript 模块,如果导入的文件具有非 JavaScript MIME 类型,则会导入失败。


import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

样式表的动态导入

类似于 JavaScript 模块的动态导入,你还可以用 dynamic import 导入 CSS 模块:


const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

这里有个坑需要注意,被添加到 adoptedstylesheet 的并不是 cssModule本身,而是 cssModule.default。

@import 的规则尚未支持

目前,CSS@import 的规则不适用 于可构造样式表,包括 CSS Module Script。如果 CSS 模块中含有@import 规则,则这些规则将被忽略。



div {
    background-color: blue;
}


@import url('./atImported.css'); 
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

目前 Firefox 和 Safari 浏览器尚未支持,不过未来可期~

总结

到此这篇关于如何像导入JS模块一样导入CSS的文章就介绍到这了,更多相关像导入JS模块导入CSS内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

一文教你如何像导入JS模块一样导入CSS

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何像导入 JS 模块一样导入 CSS?

刚刚发布的 Chrome 93 版本中更新了一项令人兴奋的新特性:CSS Module Script,使用它你可以像导入一个 JavaScript 模块一样加载 CSS 样式。

一步一步教你批量导入和导出Docker镜像文件

维护服务器时,如果服务器没有网络,还需要批量加载多个Docker镜像文件,我们可以使用脚本通过循环来自动化这个操作过程。

一文带你搞懂JS中导入模块import和require的区别

JavaScript中,模块是一种可重用的代码块,它将一些代码打包成一个单独的单元,并且可以在其他代码中进行导入和使用。JavaScript中有两种常用的方式:使用import和require,本文主要聊聊他们二者的区别
2023-03-02

如何将测试代码从一个模块导入到另一个模块而不将其暴露给生产代码?

php小编柚子在软件开发中,我们经常需要对代码进行测试。但是,我们不希望将测试代码暴露给生产环境,以免引起不必要的混乱。那么,如何将测试代码从一个模块导入到另一个模块而不将其暴露给生产代码呢?这是一个常见的问题,但也有解决方案。本文将为您介
如何将测试代码从一个模块导入到另一个模块而不将其暴露给生产代码?
2024-02-09

编程热搜

目录