Bundler[Webpack] - SCSS

01.SCSS 파일 연결

• webpack 패키지 환경에서 scss 파일을 연결하는 방법에 대해 알아보겠습니다.

02.SCSS 파일 연결 방법

2-1.루트 경로에 SCSS 폴더 생성 & main.scss 파일 생성

• 루트 경로에 SCSS 폴더를 만들고 SCSS폴더안에 main.scss 파일을 생성 합니다.

2-2.main.js import

import '../scss/main.scss'

• main.js에서 import 키워드를 통해 SCSS 파일을 가져옵니다.

2-3.외부 패키지 설치 & 확인

• webpack은 SCSS 파일을 읽을 수 없으므로 문제가 발생하게 됩니다.
• 이를 해결하기 위해서 외부의 패키지를 설치해야 합니다.

$ npm i -D css-loader style-loader // css 파일 관련 패키지
$ npm i -D sass-loader sass // scss 파일 관련 패키지

• package.json

 "devDependencies": {
    "copy-webpack-plugin": "^9.1.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  }

2-4.module 옵션 추가

• SCSS 정규 표현식 작성

  module: {
    rules: [
      {
        test: /\.s?css$/, // .scss 또는 .css확장자로 끝나는 파일을 찾는 정규 표현식
        use: [
          "style-loader", // main.css에 해석된 내용을 삽입하는 패키지
          "css-loader", // JS에서 CSS 파일을 해석하는 패키지
          "sass-loader"
        ]
      }
    ]
  }

• test에 사용한 정규표현식인 /\.css$/는 css 파일을 읽기 때문에 그 앞에 s?를 붙여 s로 시작하거나 그렇지 않아도 된다는 의미를 부여하여 /\.s?css$/를 입력해줍니다.

• use 태그에는 이전 포스트에서 다룬 css 파일을 가져오는 패키지인 style-loader, css-loader에 추가적으로 설치한 패키지인 sass-loader를 입력해주시면 됩니다.

• webpack.config.js 파일

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  module: {
    rules: [
      {
        test: /\.s?css$/, // .scss 또는 .css확장자로 끝나는 파일을 찾는 정규 표현식
        use: [
          "style-loader", // main.css에 해석된 내용을 삽입하는 패키지
          "css-loader", // JS에서 CSS 파일을 해석하는 패키지
          "sass-loader"
        ]
      }
    ]
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    }),
    new CopyPlugin({
      patterns: [
        { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

2-5.main.scss 파일 작성

$color---black: #000;
$color---white: #fff;

body {
  background-color: $color---black;
  h1 {
    color: $color---white;
    font-size: 40px;
  }
}

03.개발 서버 오픈

$ npm run dev

• 프로젝트에 SCSS 파일에 입력한 스타일이 잘 적용된 것을 볼 수 있습니다.