Webpack تحويل ملفات less إلى css

8 سبتمبر 2021

أحتاج إلى تحويل الملفين light-theme.less و dark-theme.less من ملفات less إلى css. لا أعرف كيفية القيام بذلك في حزمة webpack وتخزينها في المجلد العام من تطبيقي. كانت محاولتي:

module.exports = {
  module: {
    rules: [
      {
        test: /\-theme.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
      },
    ],
  },
}

ولكنها لم تنجح

8 سبتمبر 2021

لاحظ أنك تستعمل الصيغة scss بدلًا من less في الخاصية test، وسيكون الكود الصحيح، كالتالي:

module.exports = {
  module: {
    rules: [
      {
        test: /\-theme.less$/i,	// لاحظ صيغة الملفات
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

9 سبتمبر 2021

يمكنك استخدام حزمة less-loader بحيث يمكنك تثبيتها من خلال الأمر التالي

npm install less less-loader --save-dev

ثم في ملف webpack.config.js يمكنك إضافة التالي إلى rules

{
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },

بحيث سيقوم هذا loader بتحويل ملفات less إلى css.

Webpack تحويل ملفات less إلى css

السؤال

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

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

Recommended Posts

سامح أشرف

أسامة زيادة

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية