์๋
ํ์ธ์! ์ด์จ๋ ํน์ ๋ธ๋ก์์ CSS ๋๋ JS๋ฅผ ์์งํ๊ณ ์ฐ๊ฒฐํ๊ณ _๊ทธ๋ฌ๋ฉด_ ํํฐ ์ฒด์ธ์ ํตํด ์ ๋ฌํ ์ ์์ต๋๊น? ํนํ pyScss๋ฅผ ์ฌ์ฉํ์ฌ SCSS๋ฅผ ์ฒ๋ฆฌํ๊ณ ์ถ์ต๋๋ค. pySCSSFilter
ํ์ฅ FilterBase
๋ง๋ค์์ผ๋ฉฐ ๋ค์๊ณผ ๊ฐ์ด ์ ๋ง ํ๊ณ ์ถ์ต๋๋ค.
{% compress css %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/mixins.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/base.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/other.scss" />
{% endcompress %}
๊ทธ๋ฌ๋ ๋ฌผ๋ก ๋ด ํ์ผ์ด ์๋ก ๊ฒฉ๋ฆฌ๋์ด ์ฒ๋ฆฌ๋๋ฏ๋ก ์๋ํ์ง ์์ต๋๋ค.
๋ฐฉ๋ฒ์ด ์๋์?
๊ฑด๋ฐฐ!
ํ ๊ทธ๊ฒ ๋ฐ๋ก ๋ด๊ฐ ์ํ์ง ์๋ ๊ฒ์ ๋๋ค.
๋์ผํ ๊ธฐ๋ณธ ๊ฒฝ๋ก์ ์์ง ์๊ณ ๋์ผํ @import ๋ฌธ์ด ์์ง๋ง ๋ค๋ฅธ ๊ฒฝ๋ก์ ์๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ํ์ผ์ ์ฐธ์กฐํ๋ ๊ฒฝ์ฐ์๋ ์ด๋ป๊ฒ
์ง๊ธ์ @import ๊ฐ ์๋ํ์ง ์์ต๋๋ค. ํ์ผ ๋ด์ฉ์ด ํ๋ก์ธ์์ ์ ๋ฌ๋๊ธฐ ์ ์ ์์ ํ์ผ์ ๊ธฐ๋ก๋๊ธฐ ๋๋ฌธ์ ๋๋ค.
ํ์ผ์ ํ๋์ฉ ์ฒ๋ฆฌํ ๋ค์ ์ฐ๊ฒฐํ์ฌ ์ปดํ์ผ์ ๋ํ ๋ชจ๋ ์ฐธ์กฐ๊ฐ ์ ํํ๋๋ก ํฉ๋๋ค.
๋ฏธ๋ฆฌ ์ปดํ์ผํ๊ธฐ ์ ์ ํ์ผ์ ์ฐ๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ ๋ฒ์งธ๋ก ํฌํํ๊ฒ ์ต๋๋ค. ํ์ค์ ๋ฏน์ค์ธ๊ณผ ์ ์ญ ๋ณ์๋ฅผ ํ๋์ ํ์ผ์ ์ ์งํ๊ณ ์ปดํ์ผํ๊ธฐ ์ ์ ๋ณํฉํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ less ๋ฑ์ ์ฌ์ฉํ ๋ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. ์ง๊ธ ๋น์ฅ์ ๋ชจ๋ CSS ํ์ผ์์ ํด๋น ๋ณ์์ ๋ฏน์ค์ธ์ ๋ฐ๋ณตํด์ผ ํฉ๋๋ค. ์ฆ, ์ฌ๋ฌ CSS ํ์ผ์์ ์ฌ์ฉ๋๋ ์คํจ ์์ ์ ์ญ ๋ณ์ ์งํฉ์ด ์๋ ๊ฒฝ์ฐ sass ๋๋ ๊ทธ ์ดํ์ ๊ฐ์ CSS ํ๋ ์์ํฌ์์ ์ ์ญ ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๋ชฉ์ ์ ๋ง์น ์ ์์ต๋๋ค. , ๋ชจ๋ ๊ฒ์ ํ๋์ ํ์ผ์ ๋ณด๊ดํ์ง ์๋ ํ.
๋๋ hvdklauw๊ฐ ์ธ๊ธํ ๋ฌธ์ ๋ฅผ ์ดํดํ๋ฏ๋ก ์ฌ์ ์ปดํ์ผ ์ ์ด๋ ํ์ ๋ณํฉํ ์ง ์ฌ๋ถ์ ๊ด๊ณ์์ด ๊ฐ ์์ถ ๋ธ๋ก์ ์ต์ ์ด ๋ ์ ์์ต๋๊น?
@gensmann ์์ถ ๋ธ๋ก์ ์ต์ ์ ์ถ๊ฐํ๋ ๊ฒ์ ๊ณํ์ฒ๋ผ ๋ค๋ฆฝ๋๋ค.
CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ๋ ์ฌ์ฉํ ๋ 'ํต์ฌ' ๊ธฐ๋ฅ์ด ๋ฏน์ค์ธ์ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ๊ฒ์ด ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ฐ๋ผ์ ํํฐ๋ฅผ ํตํด ์ฒ๋ฆฌํ๊ธฐ ์ ์ ํ์ผ์ ์ฐ๊ฒฐํ๋ ๊ฒ์ ํ์ ๊ธฐ๋ฅ์ ๋๋ค. @jannon ์์ฒญ์ dev ๋ถ๊ธฐ django_compressor๋ก ๋ณํฉํ ๊ณํ์ด ์์ต๋๊น?
Sass์ ๊ด๋ จํ์ฌ ์ด์ ๋ํ ๋์ ์ ๊ทผ ๋ฐฉ์์ sass ๋ฐ์ด๋๋ฆฌ์ ๋ํ ๋ชจ๋ ํฌํจ ๊ฒฝ๋ก๋ฅผ ์ ์ํ ๋ค์ ๋ด scss ํ์ผ์ ๋ค๋ฅธ ํ์ผ์ @import
์ ์ํ๋ ๊ฒ์
๋๋ค.
# app/settings/common.py
...
scss_args = " ".join(["--include-path %s/vendor/bourbon/app/assets/stylesheets/" % VENDOR_ROOT,
"--include-path %s/vendor/bootstrap-sass-official/vendor/assets/stylesheets/" % VENDOR_ROOT])
...
COMPRESS_PRECOMPILERS = (
('text/coffeescript', 'node_modules/.bin/coffee --compile --stdio'),
('text/x-scss', 'node_modules/.bin/node-sass %s {infile} {outfile}' % scss_args)
)
...
// app/common/static/css/screen.scss
<strong i="9">@import</strong> url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
<strong i="10">@import</strong> "./vendor.scss";
<strong i="11">@import</strong> "./elements.scss";
<strong i="12">@import</strong> "./pages.scss";
body, html {
font-family: 'Montserrat';
}
// app/common/static/css/vendor.scss
<strong i="15">@import</strong> "_bourbon.scss";
<strong i="16">@import</strong> "bootstrap.scss";
<! -- app/common/templates/base.html -->
...
{% compress css %}
<link href="{% static 'css/screen.scss' %}" type='text/x-scss' media='screen, projector' rel='stylesheet'>
{% endcompress %}
...
@airtonix ์ด ์์
์ ์์ํ์ง๋ง @import
'ed ํ์ผ์ ๋ํ ๋ณ๊ฒฝ ์ฌํญ์ ๊ฐ์๋์ง ์์ผ๋ฏ๋ก ๋ชจ๋ CSS ๋ณ๊ฒฝ ์ฌํญ์ ๋ํด ์๋ฒ๋ฅผ ๋ค์ ์์ํด์ผ ํฉ๋๋ค.
์ด ๊ธฐ๋ฅ์ด ์์ง ๊ตฌํ๋์ง ์์๋ค๋ ์ฌ์ค์ ๋๋์ต๋๋ค. webassets ๋ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ฌ ์ฌ์ฉ์๊ฐ SASS_AS_OUTPUT = True
๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ํ์ฌ ์ ํ์ ์ผ๋ก ํ์ผ์ ๋จผ์ ์ฐ๊ฒฐํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ๋ ์ฌ์ฉํ ๋ 'ํต์ฌ' ๊ธฐ๋ฅ์ด ๋ฏน์ค์ธ์ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ๊ฒ์ด ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ฐ๋ผ์ ํํฐ๋ฅผ ํตํด ์ฒ๋ฆฌํ๊ธฐ ์ ์ ํ์ผ์ ์ฐ๊ฒฐํ๋ ๊ฒ์ ํ์ ๊ธฐ๋ฅ์ ๋๋ค. @jannon ์์ฒญ์ dev ๋ถ๊ธฐ django_compressor๋ก ๋ณํฉํ ๊ณํ์ด ์์ต๋๊น?