Stylebot: V3μ—μ„œ @import κΈ°λŠ₯을 μ œκ±°ν•œ 것 κ°™μŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2020λ…„ 07μ›” 29일  Β·  10μ½”λ©˜νŠΈ  Β·  좜처: ankit/stylebot

μ•ˆλ…•ν•˜μ„Έμš” @ankitμž…λ‹ˆλ‹€.

버전을 λͺ¨λ‹ˆν„°λ§ν•  수 μžˆλ„λ‘ github을 μ‚¬μš©ν•˜μ—¬ CSS νŒŒμΌμ„ κ΄€λ¦¬ν•©λ‹ˆλ‹€.

μ €λŠ” @import λ₯Ό μ‚¬μš©ν•˜μ—¬ Stylebot으둜 ν•΄λ‹Ή μŠ€νƒ€μΌμ‹œνŠΈλ₯Ό 보고 μ—…λ°μ΄νŠΈν•  λ•Œλ§ˆλ‹€ CSSλ₯Ό λ³΅μ‚¬ν•˜μ—¬ λΆ™μ—¬λ„£λŠ” λŒ€μ‹  λ‹€λ₯Έ μ‚¬μš©μžκ°€ μžλ™μœΌλ‘œ μ—…λ°μ΄νŠΈλ₯Ό 받을 수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.

  • @import κ°€ μž‘λ™μ„ λ©ˆμ·„μŠ΅λ‹ˆλ‹€ 😒
  • κ·ΈλŸ¬λ‚˜ Chrome ν™•μž₯ ν”„λ‘œκ·Έλž¨μ„ μ œκ±°ν•˜κ³  λ‹€μ‹œ μ„€μΉ˜ν•˜μ§€ μ•ŠμœΌλ©΄ μŠ€νƒ€μΌμ‹œνŠΈκ°€ μ—…λ°μ΄νŠΈλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

(λ‚΄κ°€ ν›„μ›ν•œ κ²ƒμ²˜λŸΌ @import κΈ°λŠ₯을 μœ μ§€ν•˜κ±°λ‚˜ λ‹€μ‹œ ν™œμ„±ν™”ν•  수 있기λ₯Ό λ°”λžλ‹ˆλ‹€.)

κ°μ‚¬ν•©λ‹ˆλ‹€.

bug resolved

λͺ¨λ“  10 λŒ“κΈ€

이 이미지에 따라:
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 파일 ν™•μž₯λͺ… 포함).

정말 κ°μ‚¬ν•©λ‹ˆλ‹€, 정말 κ°μ‚¬ν•©λ‹ˆλ‹€! πŸ˜ŠπŸ‘

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰