تا %60 تخفیف خرید برای 5 نفر با صدور مدرک فقط تا
00 00 00

آموزش Webpack قسمت 7: کار با CSS و SASS

حسین احمدی
حسین احمدی
0 پسند
100 بازدید
0 نظر
3 ماه قبل

ضمیمه ها

WebpackSample.rar

یکی از مزیت های جالب و البته کاربردی Webpack، امکان استفاده و کار با CSS هست. در این بخش با نحوه نوشتن استایل ها CSS، پردازش اون ها توسط Webpack، قرار دادن استایل ها در صفحات html، پردازش فایل های SASS و در نهایت ایجاد فایل CSS نهایی جداگانه توسط Webpack توضیح میدیم. اما شاید این سوال براتون پیش بیاد که چرا باید CSS رو بوسیله فایل JavaScript در پروژه استفاده کنیم؟ بهتر نیست که استایل ها جداگانه نوشته بشه و بعد به صفحه مورد نظر Link بشه؟ اجازه بدید اینطور توضیح بدم، فرض کنید که شما از یک کتابخانه برای Date Picker استفاده می کنید و این Date Picker علاوه بر کدهای JavaScript، شامل یکسری Style ها در قالب CSS هم هست، شما بوسیله Import کردن استایل ها در فایل JavaScript امکان جدا کردن بخش های یک پروژه رو خواهید داشت و این کار باعث میشه که دسترسی به فایل ها راحت تر باشه.
در ادامه و در تکمیل پروژه ای که در بخش های قبلی استفاده کردیم، با یک مثال ساده نحوه استفاده از CSS رو توضیح میدیم. داخل پوشه src، یک فایل جدید با نام styles.css ایجاد کرده و کدهای زیر رو داخلش می نویسیم:

body{
 background-color: darkred;
}

در ادامه، فایل index.js رو باز کرده و خط زیر رو به ابتدای فایل اضافه می کنیم:

import styles from './styles.css';

و در نهایت اجرای دستور npm run build. بعد از اجرای دستور build با پیام خطای زیر مواجه میشیم:

ERROR in ./src/styles.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

این خطا به ما میگه کع شمان دارید از فایلی استفاده می کنید که نیاز به Loader مخصوص اون فایل رو داره. در بخش Loader ها گفتیم که از loader برای پردازش فایل های خاص مثل فایل js یا css استفاده میشه. برای اینکه بتونیم از css در پروژمون استفاده کنیم loader مخصوص اینکار رو بوسیله دستور زیر به پروژه اضافه می کنیم:

npm install css-loader --save-dev

بعد از نصب css-loader باید تنظیمات مربوطه رو به فایل webpack.config.js اضافه کنیم:

rules: [
{
 test: /\.m?js$/,
 ...
},
{
 test: /\.css$/i,
 use:['css-loader']
}

اگر مجدد دستور npm run build رو اجرا کنیم میبینیم که دیگه پیام خطایی دریافت نمیکنیم و webpack تونست فایل css مارو پردازش کنه. اما اگر صفحه index.html رو در مرورگر باز کنیم، میبینیم که هیچ تغییری ایجاد نشده! دلیل این مشکل این هست که ما فقط فایل css رو پردازش کردیم، ولی محتویات اون رو به صفحه مورد نظر inject نکردیم. برای رفع این مشکل از loader ای با نام style-loader استفاده می کنیم. ابتدا loader رو بوسیله دستور زیر نصب می کنیم:

npm install style-loader --save-dev

بعد از نصب، rule ای که در فایل webpack.config.js تعریف کردیم رو به صورت زیر تغییر میدیم:

{
 test: /\.css$/i,
 use:['style-loader','css-loader']
}

دستور npm run build رو اجرا کرده، صفحه index.html رو باز می کنیم و اینبار خواهیم دید که استایل مورد نظر به صفحه ما اعمال شده. دقت کنید که ما داخل صفحه index.html به هیچ فایل css ای link ندادیم، کاری که انجام شده، استایل ها توسط کد javascript به بخش head صفحه ما اضافه شده که از بخش inspect element میشه این موضوع رو مشاهده کرد:

آموزش Webpack

حالا که با نحوه استفاده از css در webpack آشنا شدیم، یه نگاه کوتاه به نحوه کامپایل کردن SASS به CSS هم بندازیم. برای اینکار از Loader ای با نام sass-loader استفاده میکنیم (این loader از یک loader دیگه به نام node-sass استفاده میکنه که باید حتماً نصب بشه). برای نصب loader های مورد نیاز دستور زیر رو اجرا میکنیم:

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

بعد از نصب loader ها، به فایل webpack.config.js یک rule جدید برای فایل sass اضافه می کنیم:

{
 test: /\.css$/i,
 use:['style-loader','css-loader']
},
{
 test: /\.scss$/i,
 use:['style-loader','css-loader','sass-loader']
}  

داخل پوشه src یک فایل با نام application.scss ایجاد می کنیم با محتویات زیر:

$gradient: linear-gradient(to right, #00467f, #a5cc82);
body{
 background-image: $gradient;
}

و داخل فایل index.js، فایل application.sass رو import می کنیم:

import styles from './styles.css';
import application from './application.scss';

و در انتها اجرای دستور npm run build. اگر صفحه index.html رو باز کنیم gradient تعریف شده به صفحه اعمال شده و در بخش head هم میشه استایل های اضافه شده رو دید.

یکی از قابلیت های خیلی جالب در webpack، امکان اضافه کردن Vendor Prefix ها به استایل های تعریف شده هست. اگر با CSS کار کرده باشید می دونید که بعضی از خصوصیت های css زمان تعریف، نیاز به مشخص کردن یکسری خصوصیت های اضافی برای پشتیبانی مرورگرهای مختلف دارن. برای مثال، خاصیت linear-gradient که در همین قسمت در فایل sass تعریف کردیم، در صورت استفاده از Vendor Prefix ها به صورت زیر تعریف می شوند:

background: -webkit-gradient(linear, left top, right top, from(#00467f),
to(#a5cc82));
background: -o-linear-gradient(left, #00467f, #a5cc82);
background: linear-gradient(to right, #00467f, #a5cc82);

در webpack ما نیازی به تعریف Vendor Prefix ها نداریم و بوسیله loader ای با نام postcss-loader میشه این prefix ها رو به صورت خودکار اضافه کرد. برای اینکار ابتدا loader مورد نظر رو نصب می کنیم:

npm install postcss-loader --save-dev

و فایل webpack.config.js رو به صورت زیر تغییر میدیم:

{
 test: /\.css$/i,
 use:['style-loader','css-loader','postcss-loader']
},
{
 test: /\.scss$/i,
 use:['style-loader','css-loader','postcss-loader','sass-loader']
}

اما اگر مستندات مربوط به این loader رو مطالعه کنید، ذکر شده که در حالت عادی امکان استفاده از postcss-loader با سایر loader هایی که عملیات پردازش فایل های css رو انجام میدن وجود نداره، برای اینکه postcss-loader به درستی کار کنه، باید بوسیله گزینه importLoaders مشخص کنیم که css-loader از postcss-loader استفاده میکنه. فایل webpack.config.js رو به صورت زیر تغییر میدیم:

{
 test: /\.css$/i,
 use:['style-loader',{loader:'css-loader',options:{importLoaders: 1}},'postcss-loader']
},
{
 test: /\.scss$/i,
 use:['style-loader',{loader:'css-loader',options:{importLoaders: 1}},'postcss-loader','sass-loader']
}

کار دیگه ای که باید انجام بدیم این هست که مشخص کنیم postcss-loader از یک plugin با نام autoprefixer استفاده کنه. برای اینکار بخش تعریف postcss-loader رو مطابق کد زیر به یک Object تغییر میدیم تا علاوه بر اضافه کردن Prefix ها، مشخص کنیم که چه نسخه هایی از مرورگر نیاز به اضافه کردن prefix ها دارند:

{
 test: /\.css$/i,
 use: [
  'style-loader',
  {loader:'css-loader',options:{importLoaders: 1}},
  {
   loader: 'postcss-loader',
   options: {
    plugins: [
     require('autoprefixer')({
      overrideBrowserslist: ['last 3 versions', 'ie>9']
     })
    ]
   }
  }
 ]
},
{
 test: /\.scss$/i,
 use:[
  'style-loader',
  {loader:'css-loader',options:{importLoaders: 1}},
  {
   loader: 'postcss-loader',
   options: {
    plugins: [
     require('autoprefixer')({
      overrideBrowserslist: ['last 3 versions', 'ie>9']
     })
    ]
   }
  },
  'sass-loader'
 ]
}

فقط نصب autoprefixer رو نباید فراموش کنیم:

npm install autoprefixer --save-dev

برای نهایی کردن کار، دستور npm run build رو اجرا میکنیم تا خروجی برای ما ایجاد شود. فایل index.html رو مجدد باز می کنیم و اگر بخش styles در قسمت head رو باز کنیم، خواهیم دید که prefix ها به صورت خودکار برای ما ایجاد شدن:

آموزش Webpack

تا اینجا ما با نحوه پردازش فایل های css، فایل sass و همچنین اضافه کردن prefix ها به خصوصیات css آشنا شدیم. استایل های ما تا اینجا داخل خود صفحه اضافه میشدند. این حالت زمانی که تعداد استایل ها زیاد نیست مشکلی ایجاد نمی کند. اما اگر تعداد استایل ها زیاد باشد باید این استایل ها در یک فایل جداگانه ایجاد بشن. خوشبختانه webpack بوسیله plugin ای با نام mini-css-extract-plugin اینکار را نیز برای ما انجام می دهد. ابتدا این plugin را نصب می کنیم:

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

برای استفاده از این plugin کد زیر رو به ابتدای فایل webpack.config.js اضافه می کنیم:

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

و تنظیمات مربوط به این پلاگین رو هم به صورت زیر انجام میدیم:

plugins: [
 new MiniCssExtractPlugin({
  filename: 'application.css'
 })
],

حالا باید بخش rule های مربوط به loader ها رو تغییر بدیم تا به جای Inject کردن css در صفحه، فایل خروجی برای ما ایجاد بشه:

{
 test: /\.css$/i,
 use: [
  MiniCssExtractPlugin.loader,
  ...
 ]
},
{
 test: /\.scss$/i,
 use:[
  MiniCssExtractPlugin.loader,
  ...
 ]
}

در نهایت دستور npm run build رو اجرا می کنیم. اگر به پوشه build مراجعه کنیم میبینیم که فایلی با نام application.css برای ایجاد شده و شامل کدهای css ای هست که قبلاً در بخش style صفحه ما قرار می گرفتند. کد صفحه index.html رو تغییر داده و به فایل application.js لینک میدهیم:

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
  <meta charset="utf-8">
  <title>Hello Webpack</title>
  <link rel="stylesheet" href="build/application.css" />
 </head>

در قسمت های قبلی حالت build رو روی development قرار داده بودیم و فایل های ما bundle و minify نمی شدند. بخش mode از فایل webpack.config.js رو به production تغییر میدیم:

module.exports = {
 watch: true,
 mode: "production",

دستور npm run build رو اجرا می کنیم و اگر به پوشه build مراجعه کنیم، میبینیم که فایل js ما minify شده، اما فایل css خیر. دلیل این موضوع این هست که webpack به صورت پیش فرض تنها فایل های js رو minify میکنه، اما فایل های css خیر. برای minify کردن فایل های از plugin ای با نام optimze-css-assets-webpack-plugin استفاده می کنیم. ابتدا نصب این پلاگین:

npm install optimize-css-assets-webpack-plugin --save-dev

و بعد require کردن این پلاگین در ابتدای فایل webpack.config.js:

const OptimzeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

و بعد هم تنظیمات مربوط به این پلاگین تا برای استفاده آماده بشه. در مستندات خود webpack بخشی هست که توضیحات مربوط به optimization هست، برای optimize کردن فایل های css به فایل webpack.config.js بخشی به صورت زیر استفاده می کنیم:

optimization: {
 minimizer: [
  new TerserJSPlugin({}),
  new OptimzeCssAssetsPlugin({})
 ]
},

در این بخش ما دو Optimizer مشخص کردیم، یکی OptimzeCssAssetsPlugin که بوسیله پلاگین optimize-css-assets-webpack-plugin انجام میشه و یکی دیگه TerserJSPlugin که به صورت پیش فرض توسط Webpack ارائه میشه و نیازی به نصب اون نیست. اگر ما TerserJSPlugin رو اضافه نمی کردیم، optimize کردن فایل های js برای ما انجام نمی شد. البته برای استفاده از TerserJSPlugin با حتماً در ابتدای فایل webpack.config.js این پلاگین رو require کنیم:

const OptimzeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

تمامی کارهای مورد نیاز برای minify کردن فایل های css انجام شده، حالا باید دستور npm run build رو اجرا کنیم. بعد از build کردن اگر فایل css رو باز کنیم میبینیم که محتویات به صورت minify شده هست.

کدهای این قسمت به صورت ضمیمه از ابتدای این مطلب قابل دریافت هست. قبل از استفاده از کدها دستور npm install رو برای resolve کردن dependency ها اجرا کنید.

نویسنده: حسین احمدی
منبع: جزیره طراحی و توسعه وب توسینسو
هر گونه نشر و کپی برداری با ذکر نام منبع و نویسنده بلامانع است

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...