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

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

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

شكرا لكم

يمكنك عمل ذلك عن طريق تمرير عدة نقاط وصول لملفات 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

بتاريخ 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 أُخرى