Bundler(SCSS)

Dev_Go·2022년 7월 12일
0

Bundler

목록 보기
6/10
post-thumbnail

SCSS


scss파일을 js파일에 연결하는 방법

  1. webpack.config.js파일 수정
    test: /\.s?css$/로 수정하면 .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다, 라는 뜻이다.
  module: {
    rules: [
      { // .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다.
        test: /\.s?css$/,
        use: [
          // 아래 해석된 내용을 html파일에 삽입해줌
          'style-loader',
          // js파일에서 css파일을 해석할 수 있게 도와줌
          'css-loader'
        ]
      }
    ]
  },
  1. npm i -D sass-loader sass 패키지 설치
    sass-loader 패키지가 webpack에서 해당하는 SCSS파일을 읽어낼 수 있게 하고 그 문법을 해석해줄 수 있는 실제 sass 모듈을 사용해야한다. 그래서 sass-loader, sass 두개의 패키지를 설치한다.

  2. webpack.config.js파일 설정

  module: {
    rules: [
      { // .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다.
        test: /\.s?css$/,
        use: [
          // 아래 해석된 내용을 html파일에 삽입해줌
          'style-loader',
          // js파일에서 css파일을 해석할 수 있게 도와줌
          'css-loader',
          // css-loader보다 sass-loader가 먼저 실행되어야 한다.
          'sass-loader'
        ]
      }
    ]
  },
  1. 잘 연결됐는지 확인하기 위해 SCSS문법으로 수정
$color--black: #000;
$color--white: #fff;

body {
  background-color: $color--black;
}
h1 {
  color: $color--white;
  font-size: 40px;
}
  1. npm run dev 개발서버 열어서 확인
profile
프론트엔드 4년차

0개의 댓글