مشكلة في تحزيم ملفات التنسيقات الخاصة بـ Bootstrap باستخدام Vite في لارافل

أرجو طرح السؤال أسفل فيديو الدورة لمساعدتك بشكل أفضل. 

عليك أولاً تثبيت bootstrap من خلال npm.

وعندم استخدام Laravel Mix، يتم تحزيم Bootstrap عن طريق ملفات SCSS لاحظ التالي:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync('myprojects.test');

لاحظ تحزيم ملف app.scss، والذي نستورد به ملفات bootstrap.

وفي vite أنت بحاجة إلى تكوين الإعدادات المناسبة لتحزيم ملف app.scss، لذلك سنقوم بالتالي، نتوجه إلى ملف vite.config.js وكتابة التالي:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/sass/app.scss", "resources/js/app.js"],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
        },
    },
});

لاحظ أنني أضفت كائن resolve لكي نقوم بتعريف مسار مجلد bootstrap أي نقوم بتعريف ~bootstrap عندم نقوم بكتابتها في ملف app.scss بدلاً من كتابة المسار الكامل وقمنا بتعريف المسار في vite.config.js.

واستردت أيضًا وحدة path في السطر import path from 'path' وهي خاصة بـ Node.js من أجل تعريف المسار بواسطة path.resolve.

ونتأكد من استيراد بوتستراب في  app.scss كالتالي:

@import "~bootstrap/scss/bootstrap";

بعد ذلك نتوجه للملف الرئيسي لديك وهو layout.blade.php  أو app.blade أيًا كان، ونقوم بتضمين ملفات التنسيقات وملفات جافاسكريبت في عنصر head كالتالي:

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

ونحذف أي استيرادات خاصة ببوتستراب وpopper من خلال CDN في نفس الملف مثل الكود التالي:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

أيضًا حذف أي استيراد لملفات تنسيقات لا نريده في ذلك الملف مثل السطر التالي نقوم بحذفه:

    <link rel="stylesheet" href="../../css/app.css">

بعد ذلك نستورد ملفات جافاسكريبت الخاصة ببوتستراب، وأين نفعل ذلك؟ إما في ملف app.js في مجلد js أو ملف bootstrap.js في نفس المجلد.

وسأقوم بالاستيراد في ملف bootstrap، حيث سأقوم باستيراد ملف bootstrap.bundle.js والذي يتضمن كود جافاسكريبت الخاص ببوتستراب وأيضًا مكتبة popper، بكتابة السطر التالي:

import 'bootstrap/dist/js/bootstrap.bundle';

ولا تنسى تشغيل أمر npm run dev.

بتاريخ 39 دقائق مضت قال Programmer Programmers:

ولدي سؤال آخر هل يمكن استيراد ملفات CSS الخاصة ببوتستراب بدلاً من SASS؟

بالطبع تستطيع، في ملف app.css في مجلد css لديك في المشروع، قم بإضافة التالي:

@import "bootstrap/dist/css/bootstrap.min.css";

بعد ذلك يجب تحديد اسم المجلد والملف الذي تريد تحزيمه في vite لذلك سنقوم بتعديل المسار في vite.config.js ليصبح:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ]
});

ثم في الملف الرئيسي في مشروعك ضع:

    @vite(['resources/css/app.css', 'resources/js/app.js'])

والفكرة من استخدام SASS بدلاً من CSS هو أنك تستطيع التعديل على تنسيقات بوتستراب بتنسيقات خاصة بك أي التعديل على كود المكتبة.

تأكد أولا من تثبيت بوتستراب في مشروعك: 

npm install bootstrap

ثم قم بتضمين مختلف الملفات المصدرية في ملفي app.js و app.scss أو app.css ان كنت تريد استخدام css: 

import * as bootstrap from 'bootstrap';

و: 

@import "node_modules/bootstrap/scss/bootstrap";

أو: 

@import "node_modules/bootstrap/dist/css/bootstrap.min.css";

ecommerce-main/
├── src/
│   ├── css/style.css
│   ├── fonts/JF-Flat-regular.eot, JF-Flat-regular.svg, JF-Flat-regular.ttf, JF-Flat-regular.woff
│   ├── images/adidas_1.jpg
│   ├── scss/
│       ├── _custom_table.scss
│       ├── _custom_thumbnail.scss
│       ├── _mixins.scss
│       ├── _variables.scss
│       ├── custom.scss
│       └── style.scss
│   ├── checkout.html
│   ├── contact.html
│   ├── index.html
│   ├── index.js
│   ├── payment.html
│   ├── product.html
│   └── search.html
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js

هذا مشروع متجر جاهز لدورة تصميم واجهات المستخدم حملته من GitHub اتبعت خطوات تثبيت Bootstrap في Laravel Vite 

ولكن بقي إدراج هذا المشروع وترتيب هذه الملفات لتتناسق مع Laravel وربطها مع بعض.

ecommerce-main.zip

بتاريخ On 14‏/12‏/2023 at 18:46 قال Mustafa Suleiman:

لاحظ تحزيم ملف app.scss، والذي نستورد به ملفات bootstrap.

ماذا عن استيراد ملفات fonts, images

وأيضا إضافة خصائص module وال plugins الموجودة في ملف webpack.config.js ونقلها الى vite.config.js

module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: true,
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /custom\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          }
           , 
           "css-loader",
          "sass-loader"],
      },
      {
        test:  /custom\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          },
          'rtlcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: "./images/[name][ext]"
        }
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/i,
        type: 'asset/resource',
        generator: {
          filename: "./fonts/[name][ext]"
        }
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html"
    }),
    new HtmlWebpackPlugin({
      filename: "product.html",
      template: "./src/product.html"
    }),
    new HtmlWebpackPlugin({
      filename: "payment.html",
      template: "./src/payment.html"
    }),
    new HtmlWebpackPlugin({
      filename: "checkout.html",
      template: "./src/checkout.html"
    }),
    new HtmlWebpackPlugin({
      filename: "search.html",
      template: "./src/search.html"
    }),
    new HtmlWebpackPlugin({
      filename: "contact.html",
      template: "./src/contact.html"
    }),
    new MiniCssExtractPlugin({
      filename: "css/style.css"
    }),
    new CssMinimizerPlugin()
  ]
};