[ NodeJS ] Webpack + SASS ์„ค์ •ํ•˜๊ธฐ

2022. 7. 11. 09:45ยท ๐Ÿ’ป๊ธฐ์ˆ /NodeJS
๋ชฉ์ฐจ
  1.  SASS 
  2. 1. ํ•„์š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜
  3. 2. webpack.config.js
  4. 3. style.scss
  5. 4. ์ž„ํฌํŠธ
  6. 5. ํ™•์ธ
๋ฐ˜์‘ํ˜•

 

 

 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 ํด๋”๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑ๋˜๋ฉฐ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™”๋ฉด์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

 

 

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ’ป๊ธฐ์ˆ  > 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
  1.  SASS 
  2. 1. ํ•„์š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜
  3. 2. webpack.config.js
  4. 3. style.scss
  5. 4. ์ž„ํฌํŠธ
  6. 5. ํ™•์ธ
'๐Ÿ’ป๊ธฐ์ˆ /NodeJS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [ NodeJS ] winston ์ฝ˜์†”์—์„œ ์ƒ‰์ƒ ์ง€์ •ํ•˜๊ธฐ
  • [ ES6 ] webpack 5 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚œ๋…ํ™”
  • [ NodeJS ] Express์—์„œ ๋‹ค์ค‘ ๋ผ์šฐํ„ฐ ์‚ฌ์šฉํ•˜๊ธฐ
  • [ ์ฝ”๋“œ๋ณด๋ฉฐ ๋ฐฐ์šฐ๋Š” NodeJS ] EJS ์ดˆ๊ธฐ ์ฝ”๋“œ
DipokalHHJ
DipokalHHJ
์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿ”ญ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์ž ํ—ˆํ˜•์ค€์ž…๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์ธ ์—์„ธ์ด์™€ ๋Œ€์ค‘์ ์ธ ๊ธฐ์ˆ  ์นผ๋Ÿผ์„ ์“ฐ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ๋ฒ ๋“œ ์Šคํƒ€ํŠธ์—… ๋ฐ์นด๋ฅดํŠธ์ขŒํ‘œ๊ณ„๋ฅผ ์ฐฝ๋ฆฝํ•˜๊ณ  bleeding edge ๊ธฐ์ˆ ์„ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
DipokalHHJ
ํ—ˆํ˜•์ค€
DipokalHHJ
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (140)
    • ๐Ÿ’ป๊ธฐ์ˆ  (64)
      • Python (2)
      • JavaScript (6)
      • NodeJS (7)
      • Docker (3)
      • Architecture (1)
      • DevOps (3)
      • CTF (3)
      • Security (2)
      • UIUX (1)
      • ์—๋Ÿฌ์™€์˜ ์ „์Ÿ (12)
      • ์ •๋ณด๊ณต์œ  (8)
      • ๊ธฐํƒ€ (7)
    • ๐Ÿ˜„์ƒ๊ฐ (57)
      • ์Šคํ† ๋ฆฌ (10)
      • ํ”„๋กœ์ ํŠธ (9)
      • ํ”„๋ฆฌ์Šคํƒ€์ผ (5)
      • ์งง์€๊ธ€ (7)
      • ์‹œ๋ฆฌ์ฆˆ (2)
      • Advertisement (1)
      • ์—์„ธ์ด (1)
      • ์ƒ๊ฐ์กฐ๊ฐ (0)
    • ๐Ÿค”ํšŒ๊ณ  (9)
      • ์—ฐ๊ฐ„ ํšŒ๊ณ  (3)
      • ํ”„๋กœ์ ํŠธ ํšŒ๊ณ  (4)
      • ์งง์€ ๊ธฐ๋ก (2)
    • ๐ŸŽธ๊ธฐํƒ€ (1)
      • ์Šค๋ฌด๋”-ํ”„๋กœ์ ํŠธ๊ณต์ง€ (2)
    • ๐Ÿš€์—์„ธ์ด (3)
    • ์ฒ ํ•™ (1)
    • ๋น„์ฆˆ๋‹ˆ์Šค (2)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

  • ๋ธ”๋กœ๊ทธ ์†Œ๊ฐœ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ํšŒ๊ณ 
  • HackCTF
  • php
  • ๋ณด์•ˆ
  • ๊ฐœ๋ฐœ์ž
  • ๋‹จ์ˆœํ•˜๊ฒŒ ์‚ด๊ธฐ
  • ์ค‘ํ•™์ƒ
  • ๊ธฐ์ˆ 
  • ์ฒญ์†Œ๋…„
  • github
  • ์—๋Ÿฌ
  • ๋””์ž์ธ
  • ์Šค๋ฌด๋”ํ”„๋กœ์ ํŠธ
  • ๊นƒํ—ˆ๋ธŒ
  • ์†Œํ”„ํŠธ์›จ์–ด
  • ์ •๋ณด๋ณด์•ˆ
  • docker
  • ๊ฐœ๋ฐœ
  • ์Šคํƒ€ํŠธ์—…
  • ์›นํŒฉ
  • ๊ต์œก
  • ๋„์ปค
  • ๋””์ž์ธ ์‹œ์Šคํ…œ
  • TypeScript
  • js
  • Nodejs
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • webpack
  • vscode
  • ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.2
DipokalHHJ
[ NodeJS ] Webpack + SASS ์„ค์ •ํ•˜๊ธฐ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.