الفرق بين 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

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

أسامة زيادة

أسامة زيادة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية