安裝 loader

npm install sass-loader node-sass --save-dev
  • sass-loader 協助 Webpack 讀取 Sass 文件
  • node-sass 編譯 Sass 文件成 CSS 文件

修改 webpack 設定檔

  1. 修改 CSS 規則的 test 描述，使其可以處理 sass, scss, css 檔案

  2. 加入 sass-loader ，順序從右算起第一個

    // Node.js 內建用來處理路徑的模組
const path = require('path');

// 抽離 CSS 檔案的套件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 壓縮 CSS 的套件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// 壓縮 JS 的套件
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {

// Webpack 的進入點
entry: './src/index.js',
  
// Webpack 輸出點
output: {

// 輸出的檔案名稱
filename: 'main.js',
    
// 輸出的檔案位置
path: path.resolve(__dirname, './dist/'),
},

// 在生產模式會壓縮 CSS 與 JS 檔案
optimization: {
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
},
  
// 設定 CSS 的輸出方式
// 使用[name]變數，代表使用 entry 文件的檔名來命名檔案
plugins: [
new MiniCssExtractPlugin({
  filename: './css/[name].bundle.css',
}),
],
module: {
rules: [

  // Babel
  {
    test: /\.(js)$/,
    exclude: /(node_modules)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
      },
    },
  },
      
  // CSS
  // style-loader 會將 CSS 注入 HTML 
  // MiniCssExtractPlugin.loader 會將 CSS 抽離成獨立檔案
  {
    test: /\.(sa|sc|c)ss$/,
    //use: ['style-loader', 'css-loader'],
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
  },
],
},
};

載入 Sass 文件

在 src 資料夾中增加 scss 目錄，創建兩個 Sass 檔案

main.scss 用來 import scss 的其他模組

@import "base";

_base.scss 定義 H1 的簡單樣式

h1{
  font-size: 72px;
  color: #00cc99;
}

index.js

import './reset.css'
import './style.css'
import './scss/main.scss'

const Name = ['Mike', 'Jacky', 'Andy', 'Scars']
Name.forEach((obj, idx)=> console.log(`${idx} => ${obj}`))

開始編譯

使用 Webpack 編譯文件

npx webpack --mode development

檢查編譯後的 CSS 文件，裡面包含了 reset.css, style.css 和 base.scss 的樣式，成功編譯 SCSS 文件。

參考資料