์ฐธ์กฐ: https://github.com/plus3network/gulp-less/issues/126
๊ด๋ จ ๋ฌธ์ : https://github.com/plus3network/gulp-less/issues/126
@bassjobsen ๋ฌธ์ ๋ฅผ ์ฌํํ ์ ์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ์ถ๊ฐํ ์ ์์ต๋๊น? ์ฐ๊ฒฐ๋ ๋ฒ๊ทธ์์ ๋ช ๊ฐ์ง ์๋ฅผ ์๋ํ์ง๋ง ํ์ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
NS. ํ
์คํธ ์ผ์ด์ค(๋๋ ์ด ๊ฒฝ์ฐ x๋ ํญ์ ๋ฐ์)
NS. ์ค์ ์ถ๋ ฅ
์จ. ์์ ์ถ๋ ฅ
์๋
ํ์ธ์ ๋ฃจํฌ๋
์ฒซ์งธ, ํด๊ฒฐ๋์ง ์๊ฑฐ๋ ๋ชจํธํ ์ง๋ฌธ์ผ๋ก ๋น์ ์ ๊ท์ฐฎ๊ฒํ๊ณ ์ถ์ง ์์ต๋๋ค.
๊ฐ๋จํ ๋งํด์ ๋ด๊ฐ ์ฐพ์ ๊ฒ :
๋ด Less ํ์ผ, t.less
:
p {
color: red;
}
๊ทธ๋ฐ ๋ค์ lessc t.less t.css --source-map --autoprefix
์คํํฉ๋๋ค.
์ด์ t.css.map์ ๋ค์์ด ํฌํจ๋ฉ๋๋ค.
{"version":3,"sources":["t.less","t.css"],"names":[],"mappings":"AAAA;EACA,YAAA;ECCC","file":"t.css"}
autoprefixer ์์ด: lessc t.less t.css --source-map
์์ค๋งต์ ์๋์ ๊ฐ์ต๋๋ค:
{"version":3,"sources":["t.less"],"names":[],"mappings":"AAAA;EACA,UAAA","file":"t.css"}
autoprefixer๋ฅผ ์คํํ ํ ๋ณผ ์ ์๋ฏ์ด ์ถ๋ ฅ์ ๋ณ๊ฒฝ๋์ง ์์ง๋ง ์์ค ๋งต์ ๋ณ๊ฒฝ๋๊ณ ์ถ๊ฐ๋ฉ๋๋ค.
์์ค๋ก ์ถ๋ ฅ ํ์ผ. ๋ด๊ฐ ์ดํดํ๊ณ ํ
์คํธํ ์ ์๋ ํ ์ด๊ฒ์ SASS์ ๋์ผํ ์ฝ๋์๋ ๋ค๋ฆ
๋๋ค.
์ฐธ์กฐ: https://github.com/postcss/autoprefixer-core/issues/27#issuecomment -71343166
๊ฒฐ๊ตญ autoprefixer๊ฐ ์ด๋ฌํ ๊ท์น์ ์์ค๊ฐ ๋์ด์ผ ํ๋ ๋ช ๊ฐ์ง ๊ท์น์ ์ถ๊ฐํ๋ ์ํฉ์์ ์์ ์ฌ๋ฐ๋ฅธ ๊ฒฐ๊ณผ๊ฐ ๊ฐ๋ฅํ ๋ชจํธํ ์์ธ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
๊ทธ๋์ ๋ค์ ๋๋ ๋น์ ์ ์๊ฐ์ ๋ญ๋นํ๊ณ ์ถ์ง ์์ต๋๋ค. ๋๋ ๊ทธ๊ฒ์ด ์ค์ ๋ก ๋ฌธ์ ์ธ์ง ํ์คํ์ง ์์ผ๋ฉฐ ๊ทธ๊ฒ์ด ๋๊ตฐ๊ฐ๋ฅผ ๋ค์น๊ฒ ํ ๊ฒ์ธ์ง ํ์คํ์ง ์์ต๋๋ค.
์ ์, ์ด๊ฒ์ ๋ฐฉ๊ธ ๋ซ์ ap์ ๋ํด ์ ๊ธฐํ ๋ฌธ์ ์
๋๋ค. ๊ทธ๋ด ๊ฒ์
์ฐ๊ฒฐ๋ ๋ฌธ์ ๋ฅผ ๋ค์ ๋ณด๊ณ ํด๊ฒฐํ ์ ์๋์ง ํ์ธํ์ญ์์ค.
์ด๊ฒ์ 2.7.1์์ ์ฌ์ ํ ๋ฌธ์ ์ ๋๋ค.
์ด๊ฒ์ 3.11.1์์ ์ฌ์ ํ ๋ฌธ์ ์ ๋๋ค. ์์ค ๋งต์๋ ๋ซ๋ ๋๊ดํธ์ ๋ํ ๋งคํ์ด ์์ต๋๋ค. ์์ค๊ฐ ์ ์ ํ์ผ, ์์ฑ๋๋ ์์ค ๋งต ๋ฐ ์ถ๋ ฅ CSS ํ์ผ์ ์์ถํ์ต๋๋ค.
๋ฒ๊ทธ๋ฅผ ๋ณด๋ ๋ฐ ๋์์ด ๋๋ค๋ฉด https://sokra.github.io/source-map-visualization/#custom์ผ๋ก ์ด๋ํ์ฌ ์๊ฐํ ๋๊ตฌ์ ํ์ผ์ ๋ก๋ํ๊ณ ๋ฒ๊ทธ๋ฅผ ์ง์ ๋ณผ ์ ์์ต๋๋ค.
์ด๊ฒ์ด ๊ณ ํต์ค๋ฌ์ด ์ด์ ๋ ์ฌ๋ฌ ๋จ๊ณ์ ๋ณํ์ ํ์ผ์ ์ ์ฉํ ๋์ ๋๋ค.
์๋ฅผ ๋ค์ด Less -> CSS -> Autoprefixed CSS -> ์ฐ๊ฒฐ๋ CSS ํ์ผ
๋ง์ง๋ง ๋จ๊ณ์์ ์ฒ์ ๋จ๊ณ๋ก ๋์๊ฐ๋ ์์ค ๋งต์ ๋ง๋ค๋ ค๋ฉด ๊ฐ ๋งต์ด ์๋ฃ๋์ด์ผ ํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๊ฒ์ 2.7.1์์ ์ฌ์ ํ ๋ฌธ์ ์ ๋๋ค.