React 프로젝트에 Scss(Sass) 사용하기 (feat. Webpack)

Scss를 이용해 React 컴포넌트 스타일하기

리액트 프로젝트에서 컴포넌트를 스타일 하는 방법은 Styled-components, Scss, AntDesign 등등 여러가지가 있습니다.

오늘은 그 중에서 Scss를 이용해서 리액트 프로젝트를 스타일 하는 방법에 대해서 정리해보도록 하겠습니다.

리액트 프로젝트를 만들기 위해서는 Create-react-app을 통해서 쉽게 만들 수 있죠?
하지만 오늘은 Webpack 설정을 해보며 직접 프로젝트 셋팅하는 부분부터 해보겠습니다.

1. 설치

우선 npm을 통해서 설치를 해줍니다. yarn을 통해서 설치를 해도 상관 없습니다. 원하시는 패키지 프로그램을 사용해주시면 됩니다!

npm i --save--dev node-sass style-loader css-loader sass-loader

• node-scss : scss파일을 css로 변환해주는 역할
• style-loader : webpack 설정에 필요
• css-loader : webpack 설정에 필요
• sass-loader : webpack 설정에 필요

 

위와 같은 역할을 하는 모듈들을 설치해주도록 하겠습니다. 보시면 밑에 세개는 Webpack 설정에 필요한 모듈들이기 때문에 혹시 html,css에서 scss를 사용하길 원하시는 분은 node-scss만으로도 scss파일을 css로 빌드할 수 있습니다.

설치가 다 되었을 경우의 package.json을 한번 보도록 하겠습니다. 제 package.json을 이용해 설치하셔도 상관 없을 것 같습니다.

pakage.json

{
  "name": "redux-todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development ",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "css-loader": "^3.2.0",
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0"
  }
}

이제 웹팩설정을 변경해줘야 합니다.
webpack 설정은 모두 webpack.config.js에서 하기 때문에 해당 파일을 만들어 아래와 같이 작성해줍니다.

webpack.config.js

module.exports = {
  entry: ["./src/index.tsx"],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./dist"
  }
};

오늘은 Webpack 설정을 정리하는 글이 아니기 때문에 간단하게만 설명드리자면 Webpack 규칙에 .scss파일들은 style-loader와 css-loader , scss-loader를 사용하도록 하겠다는 겁니다.

 

scss로 스타일하기

이제 설정이 끝났으니 scss파일을 만들어서 스타일링을 해줘야겠죠

./src/scss/main.scss

@import "./vars.scss";
@import "./body.scss";

./src/scss/vars.scss

$font_color: blue;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: percentage(20px / $font_size);

./src/scss/body.scss

body {
  color: $font_color;

  // Property Nesting
  font: {
    size: $font_size;
    family: $font_family;
  }

  line-height: $line_height;
}

위와 같이 스타일을 작성하고나서 npm start 혹은 yarn start를 하게 되면 아래와 같이 글자 색이 파란색으로 적용된 것을 확인할 수 있습니다.

프로젝트를 만들때 가장 어려운 것이 설정 아니겠습니까!
이제 webpack을 이용한 react설정도 완료하였고, scss를 이용해 스타일링도 할 수 있으니 얼른 다들 토이 프로젝트 하러가시죠!!