LHJ

I'm a FE developer.

사스 - 실습

02 Oct 2020 » node_webpack2

사스 - 실습

사스는 바벨 설정 방법과 거의 유사한 방법으로 설정한다.
바벨은 ES6+ 문법으로 작성된 자바스크립트를 ES5로 바꾸는 것이다.
이와 마찬가지로 사스도 사스 언어로 작성된 코드를 CSS로 바꿔준다.
프론트엔드 개발할 때 많이 쓰이는 전처리 언어이다.

사스에는 두가지 확장자가 있다.
.scss와 .sass가 있다.
사스만 쓸거면 .sass 확장자로 사용하고 그렇지않고 사스 + CSS 문법까지 사용할거면 .scss를 사용합니다.
그래서 보통 .scss를 많이 사용한다.

// app.js
import MainController from "./controllers/MainController.js";

// TODO: app.css 파일이 사라졌습니다. 이제는 app.scss를 불러올수 있도록 웹팩 구성을 추가하세요.
import "./app.scss";

document.addEventListener("DOMContentLoaded", () => {
  new MainController();
});

// webpack.config.js
const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

process.env.NODE_ENV = process.env.NODE_ENV || "development";

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          /**
           * TODO: SASS 코드를 사용할수 있겠끔 sass-loader를 구성하세요.
           */
          process.env.NODE_ENV === "production"
            ? MiniCssExtractPlugin.loader // 프로덕션 환경
            : "style-loader", // 개발 환경
          "css-loader"
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000 // 10Kb
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader" 
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: `빌드 날짜: ${new Date().toLocaleString()}`
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: {
        env: process.env.NODE_ENV === "development" ? "(개발용)" : ""
      },
      minify:
        process.env.NODE_ENV === "production"
          ? {
              collapseWhitespace: true, // 빈칸 제거
              removeComments: true // 주석 제거
            }
          : false,
      hash: process.env.NODE_ENV === "production"
    }),
    new CleanWebpackPlugin(),
    ...(process.env.NODE_ENV === "production"
      ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
      : [])
  ]
};

자바스크립트 코드를 변환하기 위해 바벨이 있고 자바스크립트 파일을 웹팩에서 처리하기 위한 babel-loader가 있는 것 처럼
사스 코드를 변환하기 위해 사스가 있고 사스 파일을 웹팩에서 처리하기 위해 sass-loader가 있다.

사스에선 mixin이라고 해서 함수처럼 사용할 수 있는 것들이 있는데 이러한 것들이 사스 코드의 특징이다.

그리고 views 폴더를 보면 FormView.js가 있고 FormView.scss가 있다.
그리고 FormView.js에 FormView.scss가

import "./FormView.scss";

이런식으로 import 되어있다.
이는 컴포넌트 단위로 나누어 놓은 방식이다.

Related Posts