# CSS import

{% tabs %}
{% tab title="📗 參考" %}

* [x] web.dev ⟩ [Using CSS Module Scripts to import stylesheets](https://web.dev/css-module-scripts/) ⭐️
* [ ] iThome ⟩ [把 CSS 寫在 JavaScript 中？ - CSS in JS 的使用](https://ithelp.ithome.com.tw/articles/10223071) ⭐️⭐️ - React import CSS
* [x] CSSTricks ⟩ [The Many Ways to Include CSS in JavaScript Applications](https://css-tricks.com/the-many-ways-to-include-css-in-javascript-applications/)
* [x] [林彥成](https://linyencheng.github.io/about) ⟩ [CSS in JS (react.js) 簡介與優缺點分析](https://linyencheng.github.io/2019/08/29/react-css-in-js/)
* [x] CSS2019 ⟩ [CSS-in-JS](https://2019.stateofcss.com/tw/technologies/css-in-js/)
  {% endtab %}

{% tab title="📘 手冊" %}

* [ ] GitHub ⟩ 
  * [ ] [CSS Modules](https://github.com/css-modules/css-modules/blob/master/docs/get-started.md)  (⭐️ CSS Modules ≠ CSS-in-JS)
  * [ ] [CSS Modules V1 Explainer](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md)
    {% endtab %}

{% tab title="👥 相關" %}

* [ES Modules](https://lochiwei.gitbook.io/web/js/module/es)
* [Layout System](https://lochiwei.gitbook.io/web/css/layout/system)
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="@import (in CSS)" %}

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

{% endtab %}

{% tab title="import (in JS)" %}

```javascript
/*
    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];
```

{% endtab %}

{% tab title="<link> (in HTML)" %}

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

{% endtab %}

{% tab title="📗 參考" %}

{% endtab %}
{% endtabs %}