פיתוח פרויקט באמצעות Webpack אומר שאנחנו יכולים להריץ קוד על כל אחד מהקבצים שאנחנו טוענים. באחד הפרקים הקודמים בסידרה למדנו על Babel וראינו איך לתרגם קבצי JavaScript בעזרתו. היום אני רוצה לדבר על Scss ואיך להשתמש ב Webpack כדי לתרגם קבצי Scss לקבצי CSS רגילים.

1. קובץ Scss הראשון שלי

שפת Scss נועדה לתת למתכנתים שכותבים CSS כלי עבודה טובים יותר לשתף קוד CSS בין קבצים ובין פרויקטים. אפשר לקרוא עליה באריכות בפוסט איך ולמה להתחיל להשתמש ב Scss שכתבתי בעבר. לצורך הפוסט היום אני מניח שאתם יודעים קצת Scss או שהעפתם מבט בפוסט על הנושא. בפוסט ההוא על Scss סיפרתי על כלי בשם Koala שיודע להפוך את קבצי ה Scss שלכם לקבצי CSS רגילים. הפעם נרצה לעשות את אותה עבודה עם Webpack וכך לשלב את Scss במהלך העבודה הרגיל שלנו.

התחילו עם פרויקט Webpack חדש וצרו בו תיקיה בשם styles ובה קובץ בשם main.scss. כתבו בפנים את התוכן הבא שלקוח מתוך פוסט ההקדמה שלי על Scss:

$fg: orange;
$bg: ligthtblue;

body {
  background: $bg;
  color: $fg;
}

.inverse {
  background: $fg;
  color: $bg;
}

המשימה שלנו להמשך הפוסט היא למלא את שאר הקבצים בפרויקט כדי שהקובץ הזה יגיע לדפדפן בתור קובץ CSS רגיל. מוכנים? יוצאים לדרך.

2. יצירת קובץ הגדרות webpack.config.js

בשביל לטעון את קובץ ה Scss אנחנו צריכים Loader. ואכן הספריה sass-loader תעזור לנו לטעון קובץ Scss ולהפוך אותו לקובץ CSS רגיל לכל דבר. חוץ ממנה נרצה את node-sass, את css-loader וכמובן את mini-css-extract-plugin כדי לקבל את הקבצים עצמם. סך הכל שורת ההתקנות נראית כך:

npm install --save webpack webpack-cli node-sass sass-loader css-loader html-webpack-plugin mini-css-extract-plugin

ניצור קובץ src/main.js עם שורה אחת שטוענת את קובץ העיצוב שלנו:

import '../styles/main.scss';

וניצור קובץ הגדרות webpack.config.js עם כל הפלאגינים וה loaders:

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


module.exports = {
  entry: './src/main.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'sass-loader',
        ],
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new HtmlWebpackPlugin(),
  ],
};

בניה של הפרויקט עם:

$ npx webpack -d

תייצר לנו עכשיו בתיקיית dist את הקבצים הבאים:

$ tree dist
dist
├── index.html
├── main.css
└── main.js

הקובץ main.css ששם הוא קובץ CSS תקין לכל דבר שאפשר לשלוח לדפדפן. תוכן הקובץ:

body {
  background: lightblue;
  color: orange; }

.inverse {
  background: orange;
  color: lightblue; }

השימוש ב Webpack הפך את המעבר ל Scss להרבה יותר קל - במקום להתקין אפליקציה חדשה (koala) ולזכור להפעיל אותה כל פעם, אנחנו בונים את הפרויקט בצורה רגילה לגמרי ו Webpack דואג להמרת הקבצים וחיבורם בצורה הנכונה.