Programmer Programmers

فهمت أخي لكن المشكلة في ترتيب الملفات. أنا الأن أنشأت مشروع لارافيل جديد لايحتوي إلا على ملف welcome.blade.php داخل الview وقمت بتخريج مجلد dist هل من الضروري تثبيت حزم Bootstrap أو فقط نسخ ملفات ال dist في المشروع وتعمل بشكل كامل dist/ ├── css/ │ └── style.css ├── fonts/ ├── images/ ├── 13a946ced0b5cf087e28.js ├── c6423fdef8c6547e6ed7.js ├── checkout.html ├── contact.html ├── index.html ├── main.js └── payment.html وبالمناسبة قمت بإدراج مجلدات وملفات dist في مجلد ال public والصفحات في ال view من دون تثبيت أي حزمة Bootstrap وأشتغلت الواجهات بشكل جيد. هل هذه الخطوة صحيحة أم خطأ؟ مشكلتي في ترتيب مجلدات وملفات ال dist في المشروع وربطها. أرجوا أنكم فهمتم المشكلة

هل تقصد مجلد public انا الان انشأت مشروع لارافيل جديد لايحتوي على layout

كيف يمكنني أخذ نسخة المشروع المبنية والجاهزة وتركيبها على Laravel10 بعد أن قمت ببنائها بواسطة npm run build

ماذا عن استيراد ملفات 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() ] };

ماذا عن استيراد ملفات 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() ] };

هذا مشروع متجر جاهز لدورة تصميم واجهات المستخدم حملته من GitHub اتبعت خطوات تثبيت Bootstrap في Laravel10 Vite ولكن بقي إدراج هذا المشروع وترتيب هذه الملفات لتتناسق مع Laravel10 وربطها مع بعض. حاولت تركيب الثيم بنفسي لكن ظهرت مشاكل في المسارات وأيضا في التنسيقات. 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 ecommerce-main.zip

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

مع التحديث الجديد للارافيل كنت استخدام Laravel Mix وانتقلت إلى استخدام Vite فواجهت مشكلة في تحزيم ملف SASS الخاصة ببوتستراب في ملف app.scss، كيف أقوم بذلك وتلك هي إعدادات vite الخاصة بي: 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, }), ], }); لكن تظهر الصفحة لدي بدون تنسيقات. ما الذي يتوجب علي فعله؟ ولدي سؤال آخر هل يمكن استيراد ملفات CSS الخاصة ببوتستراب بدلاً من SASS؟

شكرا جزيلا على هذا الشرح

كيفية إدراج ملفات المشاريع لدورة تصميم واجهات المستخدم في إطار العمل Laravel10 وتشغيلها.

كيفية إدراج ملفات المشاريع لدورة تصميم واجهات المستخدم في إطار العمل Laravel10 وتشغيلها.