Muscardinus

SASS 본문

FrontEnd/Webpack

SASS

Muscardinus 2022. 1. 3. 00:59
728x90

https://sass-lang.com/

 

Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass-lang.com

SASS는 css와 같은 stylesheet 언어이다.

하지만, browser에서는 인식 할 수 없는 언어이기 때문에 css 로compile해서 사용해야한다. 

이를 위해서 Webpack을 사용한다.

 

설치

npm install node-sass sass-loader css-loader --save-dev

node-sass -> SASS 코드를 css 코드로 compile 한다.

sass-loader -> Webpack에게 우리가 앞으로 SASS 코드를 작성 할 것이라는 것을 알려준다. default로 node-sass를 사용해서 compile 할 것이다. 이를 위해서 node-sass를 설치한 것이다.

css-loader -> Webpack은 css 자체를 이해할 수 없기 때문에, css를 처리할 수 있는 장치가 필요하다. 이것이 css-loader이다.

 

webpack.config.js

module.exports = {
  // 어디에서 부터 시작할것인지 -> entry
  // default -> src/index.js
  // 여러개의 entry point도 가능하다.
  entry: './index.js',
  output: {
    // webpack이 적용된 파일의 이름
    filename: 'bundle.js',
    // 저장될 위치 -> full path 필요
    // __dirname -> node에서 제공해주는 기본 기능으로 현재까지의 path를 제공해준다.
    path: __dirname + '/dist',
  },
  // loader
  module: {
    // 어떤 파일에 적용 할 것인지
    rules: [{ test: /\.js%/, exclude: /(node_moudles)/, use: 'babel-loader' }],
    // use에서는 오른쪽 부터 적용이된다.
    rules: [{ test: /\.scss$/, use: ['css-loader', 'sass-loader'] }],
  },
};

 

SASS 코드 작성

main.scss

h1 {
  color: red;
}

 

index.js 파일 작성 -> entry

import pizza from './pizza';
import './main.scss';

pizza.pepperoni();
pizza.bacon();

여기서 의문이 들 것이다. 왜 js파일에 SASS 파일이 있어도 괜찮을까?

실제로는 작동하지 않을 것이다. 왜냐하면 SASS는 js가 아니기 때문이다. 하지만, 이것은 js로 작동하지 않는다.

compilation 과정에서 Webpack에서는 dependency에 각 import를 넣기만 하고 실행을 시키지 않는다. 그저 load만 해준다.

 

index.html파일에 h1태그의 text를 넣어보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
  <script src="dist/bundle.js"></script>
</html>

적용이 안 된 것을 볼 수 있다. 그 이유는 Webpack 자체에서 자동적으로 style를 적용하지 않기 때문이다.

 

2가지 방법이 있다. Webpack에서 자동으로 페이지에 적용이 되게 하거나, 다른 파일에 bundle 되게 하는 방법이 있다.

 

첫 번째 방법,

설치

npm install style-loader --save-dev

style-loader -> bundle에서 css를 추출해서 사용할 수 있게 돕는다.  

 

설치 후, loader에 적용하면

module.exports = {
  // 어디에서 부터 시작할것인지 -> entry
  // default -> src/index.js
  // 여러개의 entry point도 가능하다.
  entry: './index.js',
  output: {
    // webpack이 적용된 파일의 이름
    filename: 'bundle.js',
    // 저장될 위치 -> full path 필요
    // __dirname -> node에서 제공해주는 기본 기능으로 현재까지의 path를 제공해준다.
    path: __dirname + '/dist',
  },
  // loader
  module: {
    // 어떤 파일에 적용 할 것인지
    rules: [{ test: /\.js%/, exclude: /(node_moudles)/, use: 'babel-loader' }],
    // use에서는 오른쪽 부터 적용이된다.
    rules: [
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    ],
  },
};

적용이 된 것을 알 수 있다.

 

하지만, 이 방법은 js 파일에 SASS를 Import하는 방식이기 때문에 추천하지 않는다.

 

두 번째 방법,

Plugin을 사용해서 css를 다른 파일에 저장해서 사용 할 수 있게 해보자.

 

mini-css-extract-plugin 사용

https://github.com/webpack-contrib/mini-css-extract-plugin

 

GitHub - webpack-contrib/mini-css-extract-plugin: Lightweight CSS extraction plugin

Lightweight CSS extraction plugin. Contribute to webpack-contrib/mini-css-extract-plugin development by creating an account on GitHub.

github.com

npm install mini-css-extract-plugin --save-dev

 

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 어디에서 부터 시작할것인지 -> entry
  // default -> src/index.js
  // 여러개의 entry point도 가능하다.
  entry: './index.js',
  output: {
    // webpack이 적용된 파일의 이름
    filename: 'bundle.js',
    // 저장될 위치 -> full path 필요
    // __dirname -> node에서 제공해주는 기본 기능으로 현재까지의 path를 제공해준다.
    path: __dirname + '/dist',
  },
  // loader
  module: {
    // 어떤 파일에 적용 할 것인지
    rules: [{ test: /\.js%/, exclude: /(node_moudles)/, use: 'babel-loader' }],
    // use에서는 오른쪽 부터 적용이된다.
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 어디에 저장하고 싶은지를 나타낸다.
      filename: 'main.css',
    }),
  ],
};

그리고, index.html에 link를 추가한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="dist/main.css" />
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
  <script src="dist/bundle.js"></script>
</html>

 

728x90

'FrontEnd > Webpack' 카테고리의 다른 글

ESLint  (0) 2022.01.03
PostCSS  (0) 2022.01.03
Babel  (0) 2022.01.02
Webpack 설치  (0) 2022.01.02
Webpack이란?  (0) 2022.01.02
'FrontEnd/Webpack' Related Articles more
Comments