Webpack SCSS

Webpack SCSS

  • Bài học này sẽ hướng dẫn bạn cách tự động biên dịch (compile) một file SCSS sang file CSS.
  • Sau khi thực hiện xong cài đặt, tiến hành chỉnh sửa và lưu file SCSS thì Webpack sẽ tự động biên dịch sang CSS, khi này bạn chỉ việc refresh trang để thấy thay đổi.

Chuẩn bị

Trước khi bắt đầu, ta cần chuẩn bị các thao tác sau:

  • Trước tiên, nếu đang chạy mode Watch hoặc Dev Server, thì các bạn dùng npm run build để trả về mode ban đầu.
  • Xóa bớt các file không liên quan đi:
    • /dist/main.min.js
    • /src/index.css
    • /src/style.css
    • /src/index.js
    • /src/my-test.js
  • Chỉnh lại webpack.config.js về ban đầu, để khỏi bị phân tâm các config khác ^^ (giữ cũng được nhé).
  • Tạo thêm file style.scss bên trong thư mục src
  • Khi này ta có cấu trúc thư mục như sau:

Webpack-project

  • node_modules

    • ...
  • package.json package.json
  • package.json webpack.config.js
  • package-lock.json package-lock.json

  • dist

    • package.json index.html

  • src

    • package.json style.scss
  • Các file lần lượt có nội dung sau:

Nội dung file /dist/index.html

Viết lại nội dung như sau:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Output Management</title>
    <link href="style.min.css" rel="stylesheet" media="all">
  </head>
  <body>
    <section>
      <h2>Đây là Headline</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa dolor, auctor ac volutpat id, molestie et velit. Etiam lectus massa, fringilla non egestas a, tristique vel sapien. </p>
    </section>
  </body>
</html>
  • File style.min.css sẽ được Webpack tự động tạo, tên file có thể tùy chỉnh tùy ý.

Nội dung file /src/style.scss

Viết nội dung mẫu file SCSS như sau:

$color-default: #333;
$color-headline: blue;
$width: 600px;
section {
  color: $color-default;
  margin: 0 auto;
  width: $width;
  h2 {
    color: $color-headline;
  }
}

Nội dung file webpack.config.js

Dọn dẹp lại file cho gọn, tránh bị phân tâm sang mấy cấu hình khác.

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

module.exports = {
  entry: [
    
  ],
  module: {
    rules: [
     
    ]
  },
  plugins: [
    
  ]
};
  • Thao tác chuẩn bị tạm ổn rồi, tiến hành thôi.

Thiết lập để chạy tự động SCSS

  • Để chạy được SCSS ta cần tiến hành các bước sau:
    • Cài đặt plugin MiniCssExtractPlugin (đã hướng dẫn ở bài Webpack minify CSS).
    • Cài đặt CSS Loader (Đã hướng dẫn ở bài Webpack CSS loader)
    • Cài đặt SCSS Loader.
    • Chỉnh file config webpack.config.js.
    • Chạy lệnh thực thi nội dung trên npm run watch.
  • Nếu bạn chưa cài đặt plugin MiniCssExtractPlugin và CSS Loader thì bạn xem lại 2 bài trước nhé. Còn đã cài xong rồi thì bắt đầu tiếp theo các bước còn lại.

Cài đặt SCSS Loader

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

Kết quả

Webpack SCSS loader

Chỉnh file config webpack.config.js

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

module.exports = {
  entry: [
    './src/style.scss'
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: '../dist/style.min.css',
    })
  ]
};
  • entry:['./src/style.scss']: file nguồn chúng ta code scss.
  • Nội dung phần rules: dùng để load SCSS, CSS và plugin.
  • Nội dung phần plugins: Gọi plugin và trả về file đích.

Chạy lệnh thực thi nội dung

Để không phải chạy lệnh thực thi nhiều lần mỗi khi thay đổi file SCSS, ta sẽ sử dụng mode Watch cho tiện.

npm run watch
  • Kết quả ta sẽ thấy bên trong thư mục dist đã được tạo một file style.min.css với nội dung minify.
section{color:#333;margin:0 auto;width:600px}section h2{color:blue}section p{text-align:center}
  • Khi chạy trình duyệt file /dist/index.html ta sẽ thấy được nội dung như sau:

Đây là Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa dolor, auctor ac volutpat id, molestie et velit. Etiam lectus massa, fringilla non egestas a, tristique vel sapien.

  • Chú ý là Webpack cũng sẽ tự động tạo file main.js, nếu bạn không có tùy chỉnh cho bất kỳ file Javascript nào, thì file này sẽ được tạo tự động (có thể chỉnh tại file package.json).
  • Vậy là ta đã config chạy SCSS một cách tự động, từ giờ các bạn chỉ cần thay đổi nội dung file /src/style.scss và save lại, thì file /dist/style.min.css sẽ được tự động cập nhật (nhớ bật mode Watch nhé ^^).

Các lệnh chính đã sử dụng trong toàn bộ bài học

Bài học Lệnh đã dùng
Cài đặt Webpack 
cd Webpack-project
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
Webpack bundle 
npx webpack
Cấu hình Webpack 
npx webpack --config webpack.config.js
npm run build
Webpack quản lý output 
npm run build
Webpack code splitting 
npm install --save lodash
npm run build
npm run build
Cài đặt và setting HtmlWebpackPlugin 
npm install --save-dev html-webpack-plugin
npm run build
Cài đặt và setting CleanWebpackPlugin 
npm install --save-dev clean-webpack-plugin
npm run build
Webpack Cache 
npm run build
npm run build
Webpack gom chung các file javascript 
npm run build
Webpack source map 
npm run build
npm run build
Webpack css loader 
npm install --save-dev style-loader css-loader
npm run build
Webpack minify CSS - OptimizeCSSAssetsPlugin 
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
npm run build
npm run build
Webpack minify Javascript - TerserJSPlugin 
npm install --save-dev mini-css-extract-plugin
npm install --save-dev terser-webpack-plugin
npm run build
Webpack watch mode 
npm run watch
Webpack dev server 
npm install --save-dev webpack-dev-server
npm start
Webpack với SCSS 
npm install --save-dev sass-loader node-sass webpack
npm run watch

Webpack Dev Server Mode

Webpack với React.js