๋ฒ๊ทธ ์ ๊ณ
๋ด ํ๋ก์ ํธ๋ฅผ์ํ ์ปดํ์ผ ๋๊ตฌ๋ฅผ ์์ฑํฉ๋๋ค.
๋ด ํ๋ก์ ํธ ์คํ์ผ ํด๋์ ํ์ผ์
- styles
_utils.less
index.less
index.less
์ฝํ
์ธ ๋
<strong i="12">@import</strong> "./utils"
๋ ์ ์ ํ์ผ์ ์ปดํ์ผํ๊ธฐ ์ํด ๋ ์ ์ API๋ฅผ ์ฌ์ฉํฉ๋๋ค.
let less=require('less');
//....
less.render(indexContent,options,(err,result)=>{
console.log(result.css)
});
_utils.less
content ๋ณ๊ฒฝํ๋ฉด ์ ์ฝ๋๊ฐ ์๋์ผ๋ก ์คํ๋ฉ๋๋ค.
ํ์ง๋ง 3.0.x ์ดํ๋ก _utils.less
content๋ฅผ ๋ณ๊ฒฝํ๋ฉด result.css
์ ๋ช ๋ฒ์ด๋ ๋ณ๊ฒฝ ๋๋๋ผ๋ ์ฒซ ๋ฒ์งธ ๊ฒฐ๊ณผ์
๋๋ค.
ํ์ง๋ง 2.7.x๋ ๊ด์ฐฎ์ต๋๋ค. _utils.less
์ฝํ
์ธ ๋ฅผ ๋ณ๊ฒฝํ๋ฉด result.css
๋ ๋ณ๊ฒฝ๋์์ต๋๋ค.
https://github.com/stevelacy/gulp-less/issues/283 ๊ณผ ๋น์ทํ๊ฒ
์ด๋ฌํ "์๋ ๊ฐ์"์ฌ๋ก์์๋ ๊ฐ ์
๋ฐ์ดํธ๋ฅผ ์ปดํ์ผํ๋ ๋ฐ ์ฌ์ฉ๋๋ Less ๊ฐ์ฒด ์ ๋์ผํ ๊ฒ ๊ฐ์ต๋๋ค . ๋ง์ฃ ? ๊ทธ๋ฐ ๋ค์ ๋ค๋ฅธ render
ํธ์ถ ์ฌ์ด์ ์ผ๋ถ ๊ฐ์ ธ ์ค๊ธฐ ์บ์๋ฅผ ์ฌ์ค์ ํ์ง ์๊ฑฐ๋ ์ด์ ๋น์ทํ ๊ฒ์ผ๋ก ์๊ฐํฉ๋๋ค.
@ seven-phases-max ์, ๋์ผํ Less ๊ฐ์ฒด๋ฅผ ์ฌ์ฉ
๋๋ ๊ฟ๊บฝ ๊ฟ๊บฝ ๊ฑฐ๋ฆฌ๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์ง์ ์ ์ API๋ฅผ ์ฌ์ฉํฉ๋๋ค.
๊ฒฐ๊ณผ ์บ์๊ฐ ์ ๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ์
๋ฐ์ดํธ๋์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ฐ๋ผ์ ๊ทํ์ ๊ฒฝ์ฐ (๋ฒ๊ทธ๊ฐ ํด๊ฒฐ ๋ ๋๊น์ง) ๋น ๋ฅธ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
require('less').render(indexContent,options,(err,result)=>{
console.log(result.css)
});
์, ๋ฌธ์ ๋ ์ธ์ https://github.com/less/less.js/commit/a48c24c4dd3c13e00a20ece80323768496a96b36#diff -a6b31db4e862654ae597161e441689bb
๋ฌธ์ ๊ฐ์ด ์ปค๋ฐ์์๋ ๊ฒ ๊ฐ์ต๋๋ค ...
ํ , ์์งํ ์์ ํ์ ์ํฅ์ ์ค ์์๋ ๊ฒ ๋ณด์ด์ง ์๋ค์ ...
๋ ธ๋ ํ๊ฒฝ์์ ์๋ ์ง์ฐ๊ธฐ ๋ ์ปดํ์ผ ์บ์ ํ์ผ :
const less = require('less');
const fileManagers = less.environment && less.environment.fileManagers || [];
fileManagers.forEach(fileManager => {
if (fileManager.contents) {
fileManager.contents = {};
}
});
๊ฐ์ฌํฉ๋๋ค @tiodot ์ง๊ธ๊น์ง ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค ...ํ์ง๋ง ๊ณง "๋ ๊นจ๋ํ"๋ฐฉ๋ฒ์ ์ป์ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค!
3.0์ ์ถ๊ฐ ๋์ด ๋ผ์ธ๊ณผ ๊ด๋ จ์ด์์ ์ ์์ต๋๋ค. https://github.com/less/less.js/blob/master/lib/less/tree/mixin-definition.js#L9
else ๋ฌธ์ ๋ํ ํน์ if / else๋ฅผ ์ ๊ฑฐํ๊ณ ๋ฌธ์ ๊ฐ ๊ณ์ ๋ฐ์ํ๋์ง ํ์ธํ์ญ์์ค. ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ์ด ์ต์ ํ๋ฅผ ์ ๊ฑฐํด์ผ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ ์ด์์ ์ธ ๊ฒ์ ์๋ก์ด ๊ตฌ๋ฌธ ๋ถ์ / ๋ ๋๋ง ํธ์ถ๋ง๋ค ํ์ผ ๊ด๋ฆฌ์ ๋๋ ๋ด๋ถ ์บ์๋ฅผ ์ง์ฐ๋ ๊ฒ์ ๋๋ค.
์ด ๋ฌธ์ ์ ๋ํ ์
๋ฐ์ดํธ๊ฐ ์๋์ง ํ์ธํ๋ ์ค์
๋๊น?
๊ฟ๊บฝ ๊ฟ๊บฝ ๊ฟ๊บฝ ํจ์ ๊ฝค ๋ง์ ๊ฐ๋ฐ์๊ฐ ์ด๊ฒ์ ํ๊ฒฉํ๊ณ ์์ต๋๋ค.
๋ช ์๊ฐ ์ ์ ๋ค์ ์๋ํด ๋ดค๋๋ฐ ํจ์น์์ด ์ ์๋ํ๋ ๊ฒ ๊ฐ์์ต๋๋ค. ๋ค๋ฅธ ์ฌ๋?
"dependencies": {
"browser-sync": "^2.24.4",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^5.0.0",
"gulp-clean-css": "^3.9.4",
"gulp-hb": "^7.0.1",
"gulp-less": "^4.0.0",
"gulp-load-plugins": "^1.5.0",
"gulp-rename": "^1.2.2"
},
"optionalDependencies": {
"less": "^3.0.4"
}
[email protected] ์์ @xinglie๋ก ์ ๊ทธ๋ ์ด๋ํ๋ ๊ฒ๊ณผ ๋์ผํ ๋ฌธ์ ๊ฐ
@tiodot์์ ์ ๊ณต ํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์ ์๊ฒ
๋ํ @ seven-phases-max์์ ์ ๊ณตํ๋ require('less').render()
ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ํธ๋ฆญ์ ์ํํ์ง ๋ชปํ์ต๋๋ค.
๋ ๋ง์ ์ ์์ด ์์ต๋๊น? :)
๋ํ ์ด๊ฒ์ผ๋ก ์ํฅ์๋ฐ์ต๋๋ค :(
์๋
ํ์ธ์, ์ ๊ฐ ๋ค๋ฅด๊ฒ ๋ฌด์์ํ๋์ง ์ ๋ชจ๋ฅด๊ฒ ์ง๋ง @tiodot๊ฐ ์ ๊ณต ํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ง๊ธ ์ ์๊ฒ ํจ๊ณผ์ ์
๋๋ค!
๋๋ ๊ทธ๊ฒ์ ๋ค์ ์๋ํ๊ณ ์ฝ๋ ์ด๋๊ฐ์์ ์ค์๋ฅผ ํ์์ ํ๋ฆผ ์๋ค.
([email protected] ์ฌ์ฉ).
๊ฐ์ฌํฉ๋๋ค @tiodot !
๊ฐ์ฌํฉ๋๋ค @tiodot
@tiodot @ hawkerboy7 @TigersWay ์ด ๋ถ๊ธฐ๊ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๊น? ๊ทธ๋ ๋ค๋ฉด PR์ ํ ๊ฒ์ ๋๋ค-์ด๊ฒ์ ํ์ธํ์ญ์์ค-https: //github.com/matthew-dean/less.js/commits/cache-modified
๋ ๊ฐ์ ๋ช ํํ๊ฒ ๋ค๋ฅธ ํ๋ก์ ํธ๋ฅผ ํ์ธํ๊ณ package.json ๋ด๋ถ์ @tiodot ํ๋ฅญํ ํจ์น๋ฅผ ์ฃผ์ ์ฒ๋ฆฌํ์ผ๋ฉฐ ์๋ฒฝํ๊ฒ ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค !!
"optionalDependencies": {
"less": "github:matthew-dean/less.js#cache-modified"
},
@ matthew-dean์ ๋๋ฅผ ์ํด ์ผํฉ๋๋ค!
@ matthew-dean ์, ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค! ๊ตฌ์ถ ํ๋ณด !! :)
@tiodot @ hawkerboy7 @TigersWay ๋ฉ์ง ์ ์ ์ฝ๊ฐ ๋ ๋นจ๋ผ์ผํ๋ค๋ ๊ฒ์ ๋๋ค. ์ ์บ์ (3.x ๊ธฐ๋ฅ)๋ก ์ปดํ์ผํ๋ ๊ฒ์ด ์ ์ผ๋ฏ๋ก ์์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ๋๋ ๊ทธ๊ฒ์ ๊บผ๋ด๋ผ๊ณ ์ ์ํ์ ๊ฒ์ ๋๋ค. PR์ ํ ๊ฒ์ ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ ธ๋ ํ๊ฒฝ์์ ์๋ ์ง์ฐ๊ธฐ ๋ ์ปดํ์ผ ์บ์ ํ์ผ :