• 0

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

كيف يمكنني إضافة أكثر من صفحة sass و ربطهم بذات المشروع، بمعنى أن أربط كلّ صفحة sass بصفحة html من هذا المشروع و شكراً !!

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 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
3 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

شكرا لكم

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 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

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن