μλ νμΈμ @ankitμ λλ€.
λ²μ μ λͺ¨λν°λ§ν μ μλλ‘ githubμ μ¬μ©νμ¬ CSS νμΌμ κ΄λ¦¬ν©λλ€.
μ λ @import
λ₯Ό μ¬μ©νμ¬ StylebotμΌλ‘ ν΄λΉ μ€νμΌμνΈλ₯Ό λ³΄κ³ μ
λ°μ΄νΈν λλ§λ€ CSSλ₯Ό 볡μ¬νμ¬ λΆμ¬λ£λ λμ λ€λ₯Έ μ¬μ©μκ° μλμΌλ‘ μ
λ°μ΄νΈλ₯Ό λ°μ μ μλλ‘ ν©λλ€.
@import
κ° μλμ λ©μ·μ΅λλ€ π’(λ΄κ° νμν κ²μ²λΌ @import
κΈ°λ₯μ μ μ§νκ±°λ λ€μ νμ±νν μ μκΈ°λ₯Ό λ°λλλ€.)
κ°μ¬ν©λλ€.
μ΄ μ΄λ―Έμ§μ λ°λΌ:
https://stylebot.dev/static/e1d2f4e7deef55b722596db0379582a4/39825/code.png
λλ κ·Έ @import
νμκ³Ό νμ€ νμμ μ¬μ©νμ΅λλ€. λ λ€ μλνμ§ μμ΅λλ€ βΉ
@easaw μμ CSSλ₯Ό μ μ 곡μ ν μ μμ΅λκΉ? λλ λ¬΄μ¨ μΌμ΄ μΌμ΄λκ³ μλμ§ μκ³ μκ³ μ΄ λ¬Έμ λ₯Ό 곧 ν΄κ²°ν μ μμ΄μΌ νλ€κ³ μκ°ν©λλ€.
@easaw μμ CSSλ₯Ό μ μ 곡μ ν μ μμ΅λκΉ? λλ λ¬΄μ¨ μΌμ΄ μΌμ΄λκ³ μλμ§ μκ³ μκ³ μ΄ λ¬Έμ λ₯Ό 곧 ν΄κ²°ν μ μμ΄μΌ νλ€κ³ μκ°ν©λλ€.
λ©μΌ 보λμ΄μ π
@import
λ¬Έμ λ₯Ό μκ³ μλ€κ³ μκ°ν©λλ€. Cross-Origin Read Blocking (CORB) blocked cross-origin response
λ‘ μΈν΄ ν¬λ‘¬μ΄ μμ²μ μ°¨λ¨ν©λλ€. μ΄μ λ²μ μμ stylebotμ μ μ©νκΈ° μ μ λͺ¨λ @import
κ·μΉμμ μλμΌλ‘ CSSλ₯Ό κ°μ Έμμ΅λλ€. 곧 μμ μ¬νμ μ μ©ν μ μμ΄μΌ ν©λλ€.
λν "Chrome νμ₯ νλ‘κ·Έλ¨μ μ κ±°νκ³ λ€μ μ€μΉνμ§ μμΌλ©΄ μ€νμΌμνΈκ° μ λ°μ΄νΈλμ§ μμ΅λλ€"λΌλ λ§μ΄ λ¬΄μ¨ λ§μΈμ§ μ κ² κ°μ΅λλ€. μΈλΆ CSSμ λν λ³κ²½ μ¬νμ μ ννκΈ° μν΄ Chrome νμ₯ νλ‘κ·Έλ¨μ λ€μ μ€μΉνμ΅λκΉ? μ΄κ²λ κ³ μΉ μ μμ΄μΌ ν©λλ€.
@import
λ¬Έμ λ₯Ό μκ³ μλ€κ³ μκ°ν©λλ€.Cross-Origin Read Blocking (CORB) blocked cross-origin response
λ‘ μΈν΄ ν¬λ‘¬μ΄ μμ²μ μ°¨λ¨ν©λλ€. μ΄μ λ²μ μμ stylebotμ μ μ©νκΈ° μ μ λͺ¨λ@import
κ·μΉμμ μλμΌλ‘ CSSλ₯Ό κ°μ Έμμ΅λλ€. 곧 μμ μ¬νμ μ μ©ν μ μμ΄μΌ ν©λλ€.
νμμ μ λλ€. λΉμ μ λ Έλ ₯μ μ λ§ κ°μ¬λ립λλ€! π
λν "Chrome νμ₯ νλ‘κ·Έλ¨μ μ κ±°νκ³ λ€μ μ€μΉνμ§ μμΌλ©΄ μ€νμΌμνΈκ° μ λ°μ΄νΈλμ§ μμ΅λλ€"λΌλ λ§μ΄ λ¬΄μ¨ λ§μΈμ§ μ κ² κ°μ΅λλ€. μΈλΆ CSSμ λν λ³κ²½ μ¬νμ μ ννκΈ° μν΄ Chrome νμ₯ νλ‘κ·Έλ¨μ λ€μ μ€μΉνμ΅λκΉ? μ΄κ²λ κ³ μΉ μ μμ΄μΌ ν©λλ€.
μ, λ§μ΅λλ€. λ³κ²½ μ¬νμ μ μ©νλ €λ©΄ λ€μ μ€μΉν΄μΌ ν©λλ€. κ³ μΉ μ μλ€λ μ’μ μμμ λλ€! π
@import
μ΄ μλνμ§λ§ μ¬μ ν Stylebotμ μ κ±°νκ³ Chrome μΉ μ€ν μ΄μμ λ€μ μ€μΉν΄μΌ ν©λλ€. CSSκ° μ
λ°μ΄νΈλμ§ μλ κ²μ΄ μ΄μν©λλ€. μ΄μ¬ν μλ‘ κ³ μΉ¨μ μλνμ§λ§ μ¬μ ν μλνμ§ μμ΅λλ€.
μ λ ¬ν΄ μ£Όμ
μ κ°μ¬ν©λλ€. νμ₯ νλ‘κ·Έλ¨μ΄ μ μΌνκ² @import
νμν μμ
μ μνν©λλ€. Firefoxμλ μ΅μ
λ μμ΅λλ€! λλ μ΄κ²μ μν΄ λ μμ£Ό Chromeμ μ¬μ©νλλ‘ μ ννμ΅λλ€!
건배 ππ
@easaw κ²©λ €μ λ§μ κ°μ¬ν©λλ€.
μΊμ± λ¬Έμ μ λν΄μλ κ³μν΄μ μμΈν μ‘°μ¬νκ² μ΅λλ€.
μ΄μ λν μμ μ¬νμ΄ μμ λκΉμ§ νμ₯ νλ‘κ·Έλ¨μ λ€μ μ€μΉνλ λμ μ μνλ ν κ°μ§ ν΄κ²° λ°©λ²μ μΈλΆ CSS λ²μ μ μ§μ νλ κ²μ λλ€. λ²μ .
githubμ μ¬μ©νλ κ²½μ° https://gist.githubusercontent.com/ankit/73bad5f20b389c08ea2a44e30338d4cf/raw μ κ°μ URLμ΄ μ€μ λ‘ μ λ°μ΄νΈλλ λ° μκ°μ΄ 걸립λλ€.
githubμ μ¬μ©νλ κ²½μ° https://gist.githubusercontent.com/ankit/73bad5f20b389c08ea2a44e30338d4cf/raw μ κ°μ URLμ΄ μ€μ λ‘ μ λ°μ΄νΈλλ λ° μκ°μ΄ 걸립λλ€.
μ, μ΄κ²μ΄ λ¬Έμ κ° λ μ μμ΅λλ€!
ν
μ€νΈ ν μ΄κ²μ λ§€μ° λΉ λ₯΄κ² μ§νλ©λλ€(github rawλ₯Ό μ¬μ©νλ κ²½μ°μλ - κ·Έλ¬λ μ 체 .css
νμΌ νμ₯λͺ
ν¬ν¨).
μ λ§ κ°μ¬ν©λλ€, μ λ§ κ°μ¬ν©λλ€! ππ