autoprefixer를 스태틱한 css에 적용할 수 있는 방법이... - 인프런

Svelte.js SPA 영화 검색 프로젝트

3. SCSS와 Autoprefixer 구성

autoprefixer를 스태틱한 css에 적용할 수 있는 방법이 있을까요?

해결된 질문

작성

421

안녕하세요

강의 다 본 후 구성 비슷하게 맞춰서 작업하고 있는데요

scss를 사용하면 vue도 마찬가지지만 svelte는 유니크한 클래스가 붙잖아요, 그래서 나중에 css 디버깅할 때 너무 불편해서 그냥 css 파일을 별도로 만들어서 붙여봤거든요,

1. head 태그에 링크로 css 삽입하는 방법,
2. main.js에 import 해서 css를 불러 오는 방법을 사용했는데 autoprefixer가 적용이 안되네요...

따로 css-loader나 file-loader를 적용해야 하나 해서 snowpack.config.js 옵션을 봤더니 rule 옵션은 없는거 같고..

다른 방법이 있을까요? ㅠㅠ

답변 1

지식공유자

jude 님 안녕하세요.😊
보내주신 이메일에 포함된 프로젝트 저장소 테스트 후 답변드려요~

1. 다음 패키지들을 설치하세요.

npm i -D postcss autoprefixer @snowpack/plugin-postcss

2. snowpack.config.js 파일에서 @snowpack/plugin-postcss 플러그인을 등록하세요.

3. 프로젝트의 루트 경로에 postcss.config.js 파일을 생성 후 autoprefixer 플러그인을 등록하세요.

4. 잘 동작하네요.

질문자

말씀하신대로 하니까 잘 작동하네요 정말 감사합니다 ㅠㅠ,

어떨 땐 config 파일로 빼내야 하고, 어떨 땐 snowpack.config에 넣어야 하고 어떨 땐 svelte.config 파일에 넣어야 하고 .. 너무 헛갈리는거 같아요;

상황에 따라 매번 여기다 해보고 저기다 해보고 그러지 않게 뭔가 명확한 기준이 있을까요..?

방금 scss도 연결해보려고 @snowpack/plugin-sass 설치하고 svelte.config.js에 prependData 설정 넣으니까 작동이 안되서 snowpack.config 에 넣으니까 컴포넌트에서 빨간줄 나오고..

알고는 있었지만 이런 모듈 의존성이나 옵션 파일 설정하는 건 정말 너무 어려운거 같아요 ㅠㅠ

지식공유자

흠.. 명확한 기준은 따로 가지고 있진 않네요.
기본적으로 snowpack 같이 좀 더 넓은 개념에서 구성으로 추가할 수 있는지 파악하고, 그 외의 경우는 패키지에 맞는 추가 구성이 있는지 따로 확인합니다.
보통 저는 공식 문서에 의존하는 편이네요~

질문자

답변 감사합니다~!
scss 연결 안되던거는 오타 때문이었던거 같아요.
말씀해주신거 참고하겠습니다 :)