تحميل ملف settings.scss بشكل تلقائي في Vue.js

عند استخدام Vue.js وتحديداً عندما تقوم بكتابة ملفات .vue، قد تجد نفسك تكرار نفس النمط في كل ملف .vue، وذلك لاستخدام المتغيرات وغيرها. على سبيل المثال، قد يكون النمط التالي:

htmlCopy code
<style lang="scss">
  @import "../styles/settings.scss";

  .someclass { color: $some-variable; }
style>

أو إذا كان الملف مدرجًا في مجلد فرعي فيجب عليك أن تكون حذرًا مع المسار، على سبيل المثال:

htmlCopy code
<style lang="scss">
  @import "../../styles/settings.scss";
style>

هل هناك طريقة لاستيراد ملف settings.scss هذا بشكل عام في كل ملف .vue تقوم بإنشائه؟ قمت بالبحث في الوثائق ولم أرَ شيئًا مثل هذا، ولكن ربما فاتني، أو ربما هذا شيء يتعين علي استغلال webpack للقيام به؟

الحل لهذه المشكلة يكمن في استخدام webpack. يمكنك تكوين webpack ليقوم بتحميل ملف settings.scss بشكل تلقائي في كل ملف .vue تقوم بإنشائه. يمكنك القيام بذلك عن طريق تحرير ملف webpack.config.js الخاص بك.

أولاً، تأكد من تثبيت مكتبة sass-loader و style-loader عبر npm إذا لم تكن مثبتة بالفعل:

cssCopy code
npm install sass-loader style-loader --save-dev

ثم، قم بتحرير ملف webpack.config.js لتضيف قواعد تحميل لـ.scss الملفات باستخدام sass-loader و style-loader. يجب أيضًا تحديد المسار الذي يحتوي على ملف settings.scss:

javascriptCopy code
const path = require('path');

module.exports = {
  // إعدادات أخرى لwebpack
  
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

بعد ذلك، يمكنك إنشاء ملف .scss في مسار المشروع الخاص بك، مثل src/styles/settings.scss. يمكنك تضمين جميع المتغيرات والأنماط العامة التي تريدها في هذا الملف.

وبهذا، يجب أن يتم تضمين ملف settings.scss في كل ملف .vue تقوم بإنشائه بشكل تلقائي عند استخدام webpack.

بالطبع، هناك المزيد من المعلومات التي يمكن توضيحها بخصوص استيراد ملف settings.scss في ملفات .vue باستخدام webpack.

عندما تقوم بتكوين webpack لمشروعك، يمكنك استخدام خيارات التكوين لتحديد الطريقة التي يتم بها استيراد ملف settings.scss في ملفات .vue الخاصة بك. على سبيل المثال، يمكنك تضمين المسار الخاص بملف settings.scss في خيارات الإعدادات الخاصة بـ sass-loader في webpack.config.js:

javascriptCopy code
module.exports = {
  // إعدادات أخرى لwebpack
  
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData: `@import "${path.resolve(__dirname, 'src/styles/settings.scss')}";`,
            },
          },
        ],
      },
    ],
  },
};

هذا الكود يستخدم خيار prependData في sass-loader لتضمين محتوى ملف settings.scss في كل ملف .scss يتم معالجته باستخدام webpack. يمكنك استبدال ‘src/styles/settings.scss’ بالمسار الفعلي لملف settings.scss في مشروعك.

باستخدام هذا التكوين، لن تحتاج بعد الآن إلى استيراد ملف settings.scss يدويًا في كل ملف .vue الخاص بك. سيتم تضمينه بشكل تلقائي في كل ملف .scss أثناء عملية البناء باستخدام webpack.

هذا النهج يجعل عملية تطوير التطبيقات الخاصة بك أكثر سلاسة ويقلل من الأخطاء المحتملة التي يمكن أن تحدث بسبب نسيان استيراد ملف settings.scss في أماكن مختلفة في مشروعك.