-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
css-loader와 style-loader의 사용 예
20.10.27 13:43 작성 조회수 437
1
안녕하세요. 저는 주로 css파일을 html에다 설정해주는데요, 그러면 css-loader나 style-loader는 딱히 필요 없는건가요?
저의 경우에는 스크립트에 css를 임포트하는 일이 없어서, 보통 어떤 경우에 이 두가지 로더를 사용하면 도움이 되는 건지 궁금합니다!
또, 나중에 플러그인에 나오는 MiniCssExtractPlugin을 사용하면 css파일을 한데 모아주고 자동으로 html에 설정 구문을 넣어주니까 그 때를 위해서 css-loader+MiniCssExtractPlugin조합으로 사용하는 경우에는 유용할 것 같은데요, 보통은 웹팩 구성할 때 이런 식으로 설정을 하는 것인지(?) 궁금합니다 !!
답변을 작성해보세요.
8
김정환
지식공유자2020.10.30
이건 웹팩을 사용하는 목적을 생각해 보시면 될것 같아요.
웹팩을 사용하는건 자바스크립트의 모듈 시스템을 사용하려는 건데요. 예를들면 import React from 'react' 이런식으로 자바스크립트 모듈을 가져오죠. 쭁님처럼 html에서 css를 가져오는 방식을 사용할수 있지만 js에서 가져오려면 모듈 시스템을 사용해야합니다. import 'style.css' 이런 식이죠.
이게 꼭 필요한 건 아니고요. 리액트처럼 컴포넌트를 개발할 때 유용합니다. 컴포넌트 별로 스타일 파일을 만들면 보기 수월하거든요. Button.jsx, Button.css 이런 식이죠.
--
질문에 답변 드리면 직접 css html에서 로딩한다면 css-loader와 style-loader는 불필요합니다.
0
luvdev01
2021.12.29
html안에다가 css를 작성하게 되면 모듈의 목적성이 떨어진다고 생각합니다. 예를들어, React에서 특정 컴포넌트에서 css만 불러오고 싶다면 import하여 불러올 수 있지만, 두개 이상의 컴포넌트안에서 className이 같다면 html안에다가 작성한 css는 모두 반영할 것이고, 모듈 안에서 사용한 방법은 특정 컴포넌트 안에서만 반영할 것이라고 생각하고, css의 양이 많아지게 되면 컴포넌트에서 필요하지 않은 css 코드를 불러오게 되어 비교적 무거울 수 있다고 생각합니다.
답변 2