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中文網其他相關文章！