اذهب إلى المحتوى
  • 0

اضافة أكثر من صفحة sass في مشروع webpack

Ali Shouaa

السؤال

Recommended Posts

  • 1

يمكنك عمل ذلك عن طريق تمرير عدة نقاط وصول لملفات scss الخاصة بك عن طريق : 

module.exports = {
    entry: {
        'about': ['./src/css/about.scss'],
        'contact': ['./src/css/contact.scss'],
        'index': ['./src/css/index.scss']
    },
    plugins: [
         new MiniCssExtractPlugin(
            {
                filename: "./css/[name].css"
            }
        ),
   ]

}

الwebpack ستقوم بقراءة مفاتيح المدخلات و تقوم بإستبدالها بالوسم name داخل الfilename فتكون المخرجات على هذا النحو : 

dist 
    css
       about.min.css
       contact.min.css
       index.min.css

   ثم بملفات الHTML يمكنك تضمين كل ملف css داخل dist/css حسب الحاجة أو حسب صفحة الHTML الحالية.        

ملاحظة :

تأكد أن تقوم بتضمين الminifier على نحو صحيح : 

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

و في حالة ظهور أي أخطاء على هاته الشاكلة  :

could not resolve module mini-css-extract-plugin

تأكد أن تقوم بتثبيت الـ Plugin :

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

 

تم التعديل في بواسطة Adnane Kadri
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحبا علي
في الحقيقة الامر سهل جدا, بعد انشاء ملف scss نقوم بترجمته ونحدد له اسما باسم الصفحة التي تريدها,مثلا اسم الصفحة index.html فليكن الملف المخرج اسمه index.css, عندما يتم ترجمته واخراجه سوف يخرج على هيئة ملف css, ثم نقوم بتضمينه في ملف index.js, ويباك سوف تخرج ملفات css الموجودة في المجلد src الى ملف واحد في المجلد dist 
شكرا لك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

ملفات ال sass التي نقوم بكتابتها في اي مشروع webpack أو غيره سواء كان ملف واحد أو أكثر سوف تترجم إلى css أي بمعنى أن ملفات ال sass لن يفهمها المتصفح وبالتالي لن نرفع هذه الملفات إلى الإستضافة وبالإضافة للتعليق السابق فإنه يمكنك تقسيم ملفات ال sass إلى مكونات صغيرة مثل صفحة لل header وصفحة لل navbar وأيضاً لكل صفحة html صفحة sass ويمكنك تقسيمها حسب ماتريد ولكن في الأخير سيكون ملف css واحد 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 21 ساعات قال Adnane Kadri:

يمكنك عمل ذلك عن طريق تمرير عدة نقاط وصول لملفات scss الخاصة بك عن طريق : 


module.exports = {
    entry: {
        'about': ['./src/css/about.scss'],
        'contact': ['./src/css/contact.scss'],
        'index': ['./src/css/index.scss']
    },
    plugins: [
         new MiniCssExtractPlugin(
            {
                filename: "./css/[name].css"
            }
        ),
   ]

}

الwebpack ستقوم بقراءة مفاتيح المدخلات و تقوم بإستبدالها بالوسم name داخل الfilename فتكون المخرجات على هذا النحو : 


dist 
    css
       about.min.css
       contact.min.css
       index.min.css

   ثم بملفات الHTML يمكنك تضمين كل ملف css داخل dist/css حسب الحاجة أو حسب صفحة الHTML الحالية.        

ملاحظة :

تأكد أن تقوم بتضمين الminifier على نحو صحيح : 


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

و في حالة ظهور أي أخطاء على هاته الشاكلة  :


could not resolve module mini-css-extract-plugin

تأكد أن تقوم بتثبيت الـ Plugin :


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

 

السلام عليكم، شكرا لك على مساعدتك

و لكن لم تعمل معي، ها هي الصفحة التي اعمل بها ،أضفت صفحة جديدة sass و ضمنتها في js و لم أستطيع اكمال باقي المعلومات..

الهدف هو ربط كل صفحة sass مختلفة عن الاخرى ب صفحة  html أُخرى

16195242392768269236472928334792.jpg

16195242742519153313590081697364.jpg

16195242910196070405287154907502.jpg

16195243084782412288469364174151.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...