اذهب إلى المحتوى
  • 0

الصورة لا تظهر عند وضع الرابط في ملف SASS في webpack image error

منتصر احمد

السؤال

Recommended Posts

  • 0

هل السؤال متعلق بدورة ما؟ يفضل ارفاق السؤال ضمن قسم تعليقات الطلبة اسفل الفيديو الذي تواجه به المشكلة.

وإلا فإنك ستحتاج ارفاق مزيدا من التفاصيل، مثل نص رسالة الخطأ التي تظهر، ومحتوى ملف اعداد ويب باك webpack.config.js

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 دقائق مضت قال Adnane Kadri:

هل السؤال متعلق بدورة ما؟ يفضل ارفاق السؤال ضمن قسم تعليقات الطلبة اسفل الفيديو الذي تواجه به المشكلة.

وإلا فإنك ستحتاج ارفاق مزيدا من التفاصيل، مثل نص رسالة الخطأ التي تظهر، ومحتوى ملف اعداد ويب باك webpack.config.js

ليس هناك خطا (error) ولكن انا اتسائل لماذا

محتوى ملف webpack.config.js


const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const HTMLWebpackPlugin = require("html-webpack-plugin");

const webpack = require("webpack");



module.exports = {

  entry: {

    app: path.resolve(__dirname, "src/index.js"),

  },



  output: {

    path: path.resolve(__dirname, "dist"),

    clean: true,

    filename: "[name]_bundle.js",

  },



  devServer: {

    static: "./dist",

    hot: true,

    open: true,

    devMiddleware: {

      writeToDisk: true,

    },

  },



  module: {

    rules: [

      {

        test: /\.html$/,

        loader: "html-loader",

      },

      {

        test: /\.(sa|sc|c)ss$/,

        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],

      },

      {

        test: /\.(png|jpg|jpeg|svg|gif)$/,

        use: {

          loader: "file-loader",

          options: {

            esModules: true,

            outputPath: "images",

            name: "images/[name].[ext]",

          },

        },

      },

    ],

  },



  plugins: [

    new HTMLWebpackPlugin({

      filename: "index.html",

      template: "./src/index.html",

    }),

    new MiniCssExtractPlugin({ filename: "css/style.css" }),

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

    }),

  ],

};

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال Mohamed Montaser3:

ليس هناك خطا (error) ولكن انا اتسائل لماذا

محتوى ملف webpack.config.js



const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const HTMLWebpackPlugin = require("html-webpack-plugin");

const webpack = require("webpack");



module.exports = {

  entry: {

    app: path.resolve(__dirname, "src/index.js"),

  },



  output: {

    path: path.resolve(__dirname, "dist"),

    clean: true,

    filename: "[name]_bundle.js",

  },



  devServer: {

    static: "./dist",

    hot: true,

    open: true,

    devMiddleware: {

      writeToDisk: true,

    },

  },



  module: {

    rules: [

      {

        test: /\.html$/,

        loader: "html-loader",

      },

      {

        test: /\.(sa|sc|c)ss$/,

        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],

      },

      {

        test: /\.(png|jpg|jpeg|svg|gif)$/,

        use: {

          loader: "file-loader",

          options: {

            esModules: true,

            outputPath: "images",

            name: "images/[name].[ext]",

          },

        },

      },

    ],

  },



  plugins: [

    new HTMLWebpackPlugin({

      filename: "index.html",

      template: "./src/index.html",

    }),

    new MiniCssExtractPlugin({ filename: "css/style.css" }),

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

    }),

  ],

};

 

هل تظهر اي رسائل اخطاء بنافذة الطرفية console عند استعراض المشروع من المتصفح؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال Adnane Kadri:

هل تظهر اي رسائل اخطاء بنافذة الطرفية console عند استعراض المشروع من المتصفح؟

لا

بتاريخ 20 دقائق مضت قال Adnane Kadri:

هل تظهر اي رسائل اخطاء بنافذة الطرفية console عند استعراض المشروع من المتصفح؟

.....

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 16 دقائق مضت قال Mohamed Montaser3:

هل الملف فيه مشكلة؟

قمت بتنصيب المكتبات بالأمر 

npm i --force

ثم تشغيل المشروع، ظهر خطأ سببه مسار صفحة HTML

  plugins: [
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",

      ^^^^^^^^^^^^^^^^^   ;
    }),

كان هنالك فراغ.

ثم عملت الصفحة بشكل جيد، أي صورة لم تظهر؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 ساعات قال Wael Aljamal:

هل الملف فيه مشكلة؟

قمت بتنصيب المكتبات بالأمر 


npm i --force

ثم تشغيل المشروع، ظهر خطأ سببه مسار صفحة HTML


  plugins: [
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",

      ^^^^^^^^^^^^^^^^^   ;
    }),

كان هنالك فراغ.

ثم عملت الصفحة بشكل جيد، أي صورة لم تظهر؟

انا عدلتها خليتها layer في الhtml وزبطها ب sass بس لو هحط السرس من الساس مش هيظهر

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 1 دقيقة مضت قال Mohamed Montaser3:

انا عدلتها خليتها layer في الhtml وزبطها ب sass بس لو هحط السرس من الساس مش هيظهر

أحسنت إيجاد حل للمشكلة، 

عندما تريد حل لمشكلة معينة، أرجو أرفاق الحالة في وقتها و ليس حالة أخرى و تحديد اي صورة و جميييع التفاصيل

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 ساعات قال Wael Aljamal:

هل الملف فيه مشكلة؟

قمت بتنصيب المكتبات بالأمر 


npm i --force

ثم تشغيل المشروع، ظهر خطأ سببه مسار صفحة HTML


  plugins: [
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",

      ^^^^^^^^^^^^^^^^^   ;
    }),

كان هنالك فراغ.

ثم عملت الصفحة بشكل جيد، أي صورة لم تظهر؟

عدلتها بس مش شغاله من ملف ال sass

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 ساعات قال Mohamed Montaser3:

عدلتها بس مش شغاله من ملف ال sass

 

بتاريخ 2 ساعات قال Wael Aljamal:

عندما تريد حل لمشكلة معينة، أرجو أرفاق الحالة في وقتها و ليس حالة أخرى و تحديد اي صورة و جميييع التفاصيل

لذلك، عليك إرفاق مشروع فيه المشكلة التي تتكلم عنها، مع تحديد أي صورة لم تعمل

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...