CSS import

📗 參考

• web.dev ⟩ Using CSS Module Scripts to import stylesheets ⭐️

• iThome ⟩ 把 CSS 寫在 JavaScript 中？ - CSS in JS 的使用 ⭐️⭐️ - React import CSS

• CSSTricks ⟩ The Many Ways to Include CSS in JavaScript Applications

• 林彥成 ⟩ CSS in JS (react.js) 簡介與優缺點分析

• CSS2019 ⟩ CSS-in-JS

📘 手冊

• GitHub ⟩

  • CSS Modules (⭐️ CSS Modules ≠ CSS-in-JS)

  • CSS Modules V1 Explainer

👥 相關

• ES Modules

• Layout System

@import (in CSS)

@import './layout/index.css';

import (in JS)

/*
    Browser Support
    ---------------
    • Chrome, Edge(v.93) ✅
    • Firefox, Safari ❌
*/

// ⭐️ import a CSS module script
import styles from './styles.css' assert { type: 'css' };

// apply it to a document 
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];

// or a shadow root 
shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styles];

<link> (in HTML)

<link rel="stylesheet" href="styles.css">

📗 參考