Django-compressor: Sass ์†Œ์Šค ๋งต

์— ๋งŒ๋“  2018๋…„ 10์›” 01์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: django-compressor/django-compressor

์•ˆ๋…•ํ•˜์„ธ์š”,์ด ์„ค์ •์ด ์žˆ์Šต๋‹ˆ๋‹ค.

COMPRESS_PRECOMPILERS = (
   ('text/x-sass', 'sassc -m auto {infile} {outfile}'),
)

sass ํŒŒ์ผ์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ƒ์„ฑํ•˜์ง€๋งŒ .map ํŒŒ์ผ์€ ์ƒ์„ฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์„ค์ •์„ ๋‹ค์Œ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด :

COMPRESS_PRECOMPILERS = (
   ('text/x-sass', 'sassc -m inline {infile} {outfile}'),
)

sass ํŒŒ์ผ ๋‚ด๋ถ€์˜ ์†Œ์Šค ๋งต์„ ๋ณด์—ฌ ์ฃผ์ง€๋งŒ ๊ดœ์ฐฎ์ง€ ๋งŒ ์†Œ์Šค ํŒŒ์ผ ๊ฒฝ๋กœ๊ฐ€ ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ƒ๋Œ€ ๊ฒฝ๋กœ๊ฐ€ ์•„๋‹Œ ์ ˆ๋Œ€ ๊ฒฝ๋กœ์ด๋ฏ€๋กœ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์„ ๊ณ ์น˜๊ฑฐ๋‚˜ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

๋ชจ๋“  7 ๋Œ“๊ธ€

์Œ, ๊ทธ๊ฑด ๋‚ด๊ฐ€ ์ „ํ˜€ ๋ชจ๋ฅด๋Š” sassc์˜ ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์•„๋‹ˆ๋ฉด ์–ด๋–ป๊ฒŒ django-compressor๊ฐ€ ์ด๊ฒƒ์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

๋™์ผํ•œ ๋ช…๋ น์„ ์…ธ์— ์ง์ ‘ ์‹คํ–‰ํ•˜๋ฉด ํŒŒ์ผ์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

ํ”„๋ฆฌ ์ปดํŒŒ์ผ๋Ÿฌ ๋ช…๋ น์ด ์–ด๋–ป๊ฒŒ ์‹คํ–‰๋˜๋Š”์ง€ ์„ค๋ช…ํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

์•„๋‡จ, ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์•„๋งˆ๋„ CssAbsoluteFilter๊ฐ€ ๋ฌธ์ œ์ผ๊นŒ์š”? ๋Œ€์‹  CssRelativeFilter๋ฅผ ์‚ฌ์šฉํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹œ๋„ํ–ˆ์ง€๋งŒ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. CSS ํŒŒ์ผ ๋์— ์ž˜๋ชป๋œ ํŒŒ์ผ ์ด๋ฆ„์ฒ˜๋Ÿผ ๋ณด์ด๋Š” /*# sourceMappingURL=tmp8w4nfn41.css.map */ ๊ฐ€ ํ‘œ์‹œ๋˜๊ณ  ๋™์ผํ•œ ๋””๋ ‰ํ† ๋ฆฌ์— ํŒŒ์ผ์ด ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ข‹์•„, ๊ทธ๋Ÿผ ๋‚˜๋Š” ์•„์ด๋””์–ด๊ฐ€ ์—†์–ด์„œ ๋””๋ฒ„๊น…์ด ํ•„์š”ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋‹น์‹ ๋ณด๋‹ค ์ฝ”๋“œ๋ฅผ ํ›จ์”ฌ ๋” ์ž˜ ์•Œ์ง€ ๋ชปํ•˜์ง€๋งŒ, ํ•„์š”ํ•œ ๊ฒƒ์ด ์žˆ์œผ๋ฉด ๋‚˜๋ฅผ ํ•‘ํ•˜์‹ญ์‹œ์˜ค.)

@camilonova ์ด ๋ฌธ์ œ์™€ ๊ด€๋ จ์ด ์—†์ง€๋งŒ https://github.com/jrief/django-sass-processor๋ฅผ ์‚ดํŽด๋ณด์‹ญ์‹œ์˜ค.

์ด ์•ฑ์€ ์ฆ‰์‹œ *.css.map ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  django-compressor์™€ ํ•จ๊ป˜ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ django-compressor๊ฐ€ ๋“ค์–ด๊ฐ€๊ธฐ ์ „์— ํŒŒ์ผ์„ ์ปดํŒŒ์ผํ•ฉ๋‹ˆ๋‹ค.

๋ฉด์ฑ… ์กฐํ•ญ : ๋‚˜๋Š” ๊ทธ ๋„์„œ๊ด€์˜ ์ €์ž์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์„ ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

sass --embed-source-map {infile} {outfile}

์—ฌ๊ธฐ์—๋Š” outfile ์†Œ์Šค ๋งต์ด ํฌํ•จ๋˜๊ณ ์ด ๋ฌธ์ œ๊ฐ€ ์ˆ˜์ •๋ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰