05. Webpack 개발 환경에서 Sass 사용하기

https://poiemaweb.com/sass-webpack

Webpack + Sass | PoiemaWeb

 

기존

{

  "name": "sass-study",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "build:sass": "sass --style compressed src/sass:dist/css"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": ""

}

 

설치

 

bash

$ npm install --save-dev webpack webpack-cli css-loader sass sass-loader mini-css-extract-plugin

 

{

  "name": "sass-study",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "build:sass": "sass --style compressed src/sass:dist/css"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": "",

  "devDependencies": {

    "css-loader": "^7.1.2",

    "mini-css-extract-plugin": "^2.9.0",

    "sass": "^1.77.8",

    "sass-loader": "^16.0.0",

    "webpack": "^5.93.0",

    "webpack-cli": "^5.1.4"

  }

}

 

package.json은 다음과 같다. npm scripts에 build를 추가한다.

{

  "name": "sass-study",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "build": "webpack -w"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": "",

  "devDependencies": {

    "css-loader": "^7.1.2",

    "mini-css-extract-plugin": "^2.9.0",

    "sass": "^1.77.8",

    "sass-loader": "^16.0.0",

    "webpack": "^5.93.0",

    "webpack-cli": "^5.1.4"

  }

}

 

 

프로젝트 루트에 webpack.config.js 파일을 생성하고 다음과 같이 수정한다.

 

const path = require('path');

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

module.exports = {

  entry: './src/sass/foo.scss',

  output: {

    path: path.resolve(__dirname, 'public')

  },

  plugins: [

    // 컴파일 + 번들링 CSS 파일이 저장될 경로와 이름 지정

    new MiniCssExtractPlugin({ filename: 'css/style.css' })

  ],

  module: {

    rules: [

      {

        test: /\.s[ac]ss$/i,

        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],

        exclude: /node_modules/

      }

    ]

  },

  devtool: 'source-map',

  mode: 'development'

};

 

 

다음 명령시

$ npm run build

 

webpack.config.js 파일에 지정한 경로(‘public/css/style.css’)에 컴파일되어 번들링된 css 파일이 저장된다.

 

 

나중에 실행해보는걸로 하자