الفرق بين style-loader و css-loader في webpack

عبد النور محمد · 4 سبتمبر 2021

CSS Loader و Style Loader هما محملان webpack. لم أستطع فهم الفرق بين الاثنين. لماذا يتعين علي استخدام محملتين عندما يقوم كلاهما بنفس المهمة؟

عبدالباسط ابراهيم · 4 سبتمبر 2021

ببساطة لكل loader مهمة مختلفة حيث أن

CSS Loader يقوم بمعالجة ملفات css فقط في حالة وجود ()url أو imports
أما ال style-loader فهو المسئول عن إضافة التنسيقات إلى صفحات الويب وتطبيقها من خلال الوسم styel كما في المثال التالي
```
<style type="text/css">
  body {
    background: yellow;
  }
</style>
```

لذلك كما ترى لكل منهما وظيفة مختلفة وينبغي عليك استخدامهما معاً

أسامة زيادة · 4 سبتمبر 2021

CSS loader يأخذ ملف CSS ويعيده مع ()imports and url الذي تم حله من خلال webpack

var css = require("css!./file.css");

style loader يأخذ تنسيق CSS ويقوم بالفعل بإدراجه في الصفحة بحيث تكون خصائص style مفعلة على الصفحة.

require("style!css!less!./file.less")

أسامة زيادة · 4 سبتمبر 2021

بتاريخ 1 ساعة قال أسامة زيادة:
CSS loader يأخذ ملف CSS ويعيده مع ()imports and url الذي تم حله من خلال webpack
var css = require("css!./file.css"); 
style loader يأخذ تنسيق CSS ويقوم بالفعل بإدراجه في الصفحة بحيث تكون خصائص style مفعلة على الصفحة.
require("style!css!less!./file.less")

يمنح css-loader التحكم في استيراد ملفات css.

تحويل عنوان

 url(image.png) => require('./image.png')

يمكّنك على سبيل المثال من استخدام أداة تحميل الملفات أو أداة تحميل url. يمكن الآن تحويل url (image.png) إلى:

url(/public-path/0dcbbaa701328a3c262cfd45869e351f.png)

أو بخاصية url-loader

url(data:image/jpeg;base64,LzlqLzRBQ ... zdF3)

style loader يأخذ تنسيقات CSS التي قمت باستيرادها في ملفات JavaScript الخاصة بك ، ويقوم بإدخالها كعلامات <style> </style> في عنصر <head> بالصفحة .

/* style.css */
body {
  background: green;
}

/* component.js */
import './style.css';

/* webpack.config.js */
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

الفرق بين style-loader و css-loader في webpack

السؤال

عبد النور محمد

رابط هذا التعليق

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

3 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

رابط هذا التعليق

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

أسامة زيادة

رابط هذا التعليق

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

أسامة زيادة

رابط هذا التعليق

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية