SASS
๊ธฐ์กด ์นํ์ด์ง์ ์คํ์ผ์ ์ ์ฉํ๊ธฐ ์ํด์๋ CSS๋ก ํ๋ํ๋ ๋ณ๊ฒฝํด์ฃผ์ด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๋ค. ์ด ๊ฐ์ CSS์ ๊ฐ๋ฐ ํธ์์ฑ์ ๋์ด๊ธฐ ์ํด ๋ฑ์ฅํ SASS, ํ๋ฆฌํ๋ก์ธ์ ์คํฌ๋ฆฝํธ ์ธ์ด์ด๋ค. CSS์ ๊ฒฝ์ฐ HTMLํ๊ฒฝ์ style ํ๊ทธ๋ง ์ง์ ํด์ฃผ๋ฉด ๋ฐ๋ก ๋ก๋๊ฐ ๋๋๋ฐ ์ด SASS๋ ๋ ์์ ๊ทธ๋ ์ง๊ฐ ์๋ค. ์ฌ์ฉํ๊ธฐ ์ ์ CSS๋ก ์ปดํ์ผํ๋ ๊ณผ์ ์ด ํ์๋ค. ๊ทธ๋์ ๋ณดํต ์นํฉ๊ณผ ํจ๊ป ์ฌ์ฉ๋๋ค.
1. ํ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
npm i webpack webpack-cli sass sass-loader style-loader mini-css-extract-plugin css-loader
์ค์น๋ฅผ ์๋ฃํด์ฃผ๋ฉด ์นํฉ ์ค์ ํ์ผ์ ๋ง๋ค์ด์ค๋ค.
2. webpack.config.js
import MiniCssExtractPlugin from "mini-css-extract-plugin";
export default
{
"entry":["./frontend/public/js/handle.js"],
"watch": true,
"output": {
"filename": "index.js",
"library": "handle"
},
"plugins": [
new MiniCssExtractPlugin({ filename: `style.css` })
],
"module": {
"rules": [{
"test": /\.s[ac]ss$/i,
"use": [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
}],
},
}
์ํธ๋ฆฌ ํ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์ง์ ํด์ค๋ค. ์ดํ ์ฌ๊ธฐ์ SASS๋ฅผ ์ํฌํธ ํ๋ ํ์ผ์ด๋ค. ์ฐธ๊ณ ๋ก ๊ฒฝ๋ก๋ ์๊ด์๋ค.
3. style.scss
.style {
border: none;
}
ํ์ CSS ๋ฌธ๋ฒ์ฒ๋ผ ์์ฑํด์ฃผ๋ฉด ๋๋ค. SASS์์ ์ง์ํ๋ ๋ค์ํ ๋ฌธ๋ฒ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์๋ ๋ฌธ์๋ฅผ ํ์ธํ๋ฉด ๋๋ค.
https://sass-lang.com/documentation/syntax
Sass: Syntax
Sass supports two different syntaxes. Each one can load the other, so it's up to you and your team which one to choose. The SCSS syntax uses the file extension .scss. With a few small exceptions, itโs a superset of CSS, which means essentially all valid
sass-lang.com
4. ์ํฌํธ
์นํฉ์์ ์ํธ๋ฆฌ ํ์ผ๋ก ์ง์ ํ JSํ์ผ์ ๋ค์๊ณผ ๊ฐ์ ๊ตฌ๋ฌธ์ ์ ๋ ฅํด์ค๋ค. ๊ฒฝ๋ก๋ SASSํ์ผ์ด ์๋ ๊ณณ์ด๋ค.
// file: ./frontend/public/js/handle.js
// ์๋ ๊ตฌ๋ฌธ์ JSํ์ผ์ ์
๋ ฅํด์ฃผ๋ฉด ๋๋ค.
import "../sass/style.scss";
5. ํ์ธ
์๋ฒ์ /dist ํด๋๊ฐ ์๋กญ๊ฒ ์์ฑ๋๋ฉฐ ๋ค์๊ณผ ๊ฐ์ ํ๋ฉด์ ๋ณผ ์ ์๋ค.
![](https://blog.kakaocdn.net/dn/8wM98/btrGWaT7lYq/p8Kix94tj5asspkcv1zUEK/img.png)
![](https://blog.kakaocdn.net/dn/bfgmDr/btrLNpgtEcR/HW8H3q2KzozUjMUvbdIfn1/img.jpg)
'๐ป๊ธฐ์ > NodeJS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ NodeJS ] winston ์ฝ์์์ ์์ ์ง์ ํ๊ธฐ (0) | 2022.06.12 |
---|---|
[ ES6 ] webpack 5 ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ ํ (0) | 2022.03.22 |
[ NodeJS ] Express์์ ๋ค์ค ๋ผ์ฐํฐ ์ฌ์ฉํ๊ธฐ (0) | 2022.01.02 |
[ ์ฝ๋๋ณด๋ฉฐ ๋ฐฐ์ฐ๋ NodeJS ] EJS ์ด๊ธฐ ์ฝ๋ (0) | 2020.03.30 |
[ ์ฝ๋๋ณด๋ฉฐ ๋ฐฐ์ฐ๋ NodeJS ] ์ด๊ธฐ ์ฝ๋ ์ธํ (0) | 2020.03.17 |
SASS
๊ธฐ์กด ์นํ์ด์ง์ ์คํ์ผ์ ์ ์ฉํ๊ธฐ ์ํด์๋ CSS๋ก ํ๋ํ๋ ๋ณ๊ฒฝํด์ฃผ์ด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๋ค. ์ด ๊ฐ์ CSS์ ๊ฐ๋ฐ ํธ์์ฑ์ ๋์ด๊ธฐ ์ํด ๋ฑ์ฅํ SASS, ํ๋ฆฌํ๋ก์ธ์ ์คํฌ๋ฆฝํธ ์ธ์ด์ด๋ค. CSS์ ๊ฒฝ์ฐ HTMLํ๊ฒฝ์ style ํ๊ทธ๋ง ์ง์ ํด์ฃผ๋ฉด ๋ฐ๋ก ๋ก๋๊ฐ ๋๋๋ฐ ์ด SASS๋ ๋ ์์ ๊ทธ๋ ์ง๊ฐ ์๋ค. ์ฌ์ฉํ๊ธฐ ์ ์ CSS๋ก ์ปดํ์ผํ๋ ๊ณผ์ ์ด ํ์๋ค. ๊ทธ๋์ ๋ณดํต ์นํฉ๊ณผ ํจ๊ป ์ฌ์ฉ๋๋ค.
1. ํ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
npm i webpack webpack-cli sass sass-loader style-loader mini-css-extract-plugin css-loader
์ค์น๋ฅผ ์๋ฃํด์ฃผ๋ฉด ์นํฉ ์ค์ ํ์ผ์ ๋ง๋ค์ด์ค๋ค.
2. webpack.config.js
import MiniCssExtractPlugin from "mini-css-extract-plugin";
export default
{
"entry":["./frontend/public/js/handle.js"],
"watch": true,
"output": {
"filename": "index.js",
"library": "handle"
},
"plugins": [
new MiniCssExtractPlugin({ filename: `style.css` })
],
"module": {
"rules": [{
"test": /\.s[ac]ss$/i,
"use": [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
}],
},
}
์ํธ๋ฆฌ ํ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์ง์ ํด์ค๋ค. ์ดํ ์ฌ๊ธฐ์ SASS๋ฅผ ์ํฌํธ ํ๋ ํ์ผ์ด๋ค. ์ฐธ๊ณ ๋ก ๊ฒฝ๋ก๋ ์๊ด์๋ค.
3. style.scss
.style {
border: none;
}
ํ์ CSS ๋ฌธ๋ฒ์ฒ๋ผ ์์ฑํด์ฃผ๋ฉด ๋๋ค. SASS์์ ์ง์ํ๋ ๋ค์ํ ๋ฌธ๋ฒ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ์๋ ๋ฌธ์๋ฅผ ํ์ธํ๋ฉด ๋๋ค.
https://sass-lang.com/documentation/syntax
Sass: Syntax
Sass supports two different syntaxes. Each one can load the other, so it's up to you and your team which one to choose. The SCSS syntax uses the file extension .scss. With a few small exceptions, itโs a superset of CSS, which means essentially all valid
sass-lang.com
4. ์ํฌํธ
์นํฉ์์ ์ํธ๋ฆฌ ํ์ผ๋ก ์ง์ ํ JSํ์ผ์ ๋ค์๊ณผ ๊ฐ์ ๊ตฌ๋ฌธ์ ์ ๋ ฅํด์ค๋ค. ๊ฒฝ๋ก๋ SASSํ์ผ์ด ์๋ ๊ณณ์ด๋ค.
// file: ./frontend/public/js/handle.js
// ์๋ ๊ตฌ๋ฌธ์ JSํ์ผ์ ์
๋ ฅํด์ฃผ๋ฉด ๋๋ค.
import "../sass/style.scss";
5. ํ์ธ
์๋ฒ์ /dist ํด๋๊ฐ ์๋กญ๊ฒ ์์ฑ๋๋ฉฐ ๋ค์๊ณผ ๊ฐ์ ํ๋ฉด์ ๋ณผ ์ ์๋ค.
![](https://blog.kakaocdn.net/dn/8wM98/btrGWaT7lYq/p8Kix94tj5asspkcv1zUEK/img.png)
![](https://blog.kakaocdn.net/dn/bfgmDr/btrLNpgtEcR/HW8H3q2KzozUjMUvbdIfn1/img.jpg)
'๐ป๊ธฐ์ > NodeJS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ NodeJS ] winston ์ฝ์์์ ์์ ์ง์ ํ๊ธฐ (0) | 2022.06.12 |
---|---|
[ ES6 ] webpack 5 ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ ํ (0) | 2022.03.22 |
[ NodeJS ] Express์์ ๋ค์ค ๋ผ์ฐํฐ ์ฌ์ฉํ๊ธฐ (0) | 2022.01.02 |
[ ์ฝ๋๋ณด๋ฉฐ ๋ฐฐ์ฐ๋ NodeJS ] EJS ์ด๊ธฐ ์ฝ๋ (0) | 2020.03.30 |
[ ์ฝ๋๋ณด๋ฉฐ ๋ฐฐ์ฐ๋ NodeJS ] ์ด๊ธฐ ์ฝ๋ ์ธํ (0) | 2020.03.17 |