عبد النور محمد نشر 21 سبتمبر 2021 أرسل تقرير مشاركة نشر 21 سبتمبر 2021 لقد قمت بإعداد ملف تكوين webpack 5 بسيط مع خادم مطور يبدو أنه يعمل ولكن عندما أقوم بإضافة <link href="/style.css" rel="stylesheet" /> إلى ملف index.html لم أحصل على تحميل CSS أخترت استخدام "style-loader" عبر "MiniCssExtractPlugin" لتمكين إعادة تحميل لا توجد أخطاء في إخراج وحدة تحكم webpack const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); module.exports = (env, options) => { const mode = options.mode; return { context: __dirname, entry: { script: './src/index.bundle.ts', style: './src/index.bundle.less', }, output: { filename: '[name].js', path: path.resolve(__dirname, './src/dist') }, devServer: { watchFiles: ['src/**/*.less'], static: { directory: path.join(__dirname, 'src'), watch: true, }, compress: true, port: 9000, hot: true, }, devtool: 'source-map', resolve: { extensions: ['.ts', '.tsx', '.js', '.css', '.less'] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css', ignoreOrder: false, }), ], module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { target: 'browserslist' } } }, { test: /\.ts(x)?$/, loader: 'ts-loader', exclude: /node_modules/ }, { test: /\.css$/, use: [ mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', { loader: 'css-loader', }, { loader: 'postcss-loader', // Run postcss actions options: { postcssOptions: { config: path.resolve(__dirname, "postcss.config.js"), } } }, ] }, { test: /\.less$/, use: [ mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'less-loader' ] }, ] }, optimization: { minimize: true, minimizer: [new TerserPlugin(), new CssMinimizerPlugin()] }, target: 'web', } }; 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 بلال زيادة نشر 21 سبتمبر 2021 أرسل تقرير مشاركة نشر 21 سبتمبر 2021 عند تشغيل المشروع عن طريق cmd , ما هي المشاكل التي تظهر ؟ هل يمكنك إرفاقها؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 محمد أبو عواد نشر 21 سبتمبر 2021 أرسل تقرير مشاركة نشر 21 سبتمبر 2021 لا يتطلب وجود رابط مثل <link href="/style.css" rel="stylesheet" /> في ملف html أداة تحميل في webpack.config.js. يبدو أنك تحصل على خطأ 404 في console في المتصفح يفيد بأن ملف غير موجود. إذا كانت هذه هي الحالة ، فإن الجزء href="/style.css" لا يشير إلى ملفك. لذلك تأكد من مسار الملف ثم حاول مرة أخرى اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Wael Aljamal نشر 21 سبتمبر 2021 أرسل تقرير مشاركة نشر 21 سبتمبر 2021 لديك الخطأ في مسار ملف التنسيقات، لايمك للمسار أن يبدأ ب / لأنه يدل على مسار مطلق بدل أن يكون نشبي، أي يجب أن يبدأ بنقطة /. أو امس المجلد / اسم الملف الحاوي لملف التنسيقات <link rel="stylesheet" href="/style.css" /> ^^^^^^^^^ خطأ جرب أحدهم <link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./css/style.css" /> <link rel="stylesheet" href="css/style.css" /> على كل حال نضمن ملف التنسيقات في index.js وليس في صفحة الويب مباشرة أحيانا النقطة تسبب مشكلة، اكتب المجلد أو اسم الملف مباشرة حسب المسار النسبي، بين ملف التضمين و ملف التنسيقات، لكن لا تبدأ ب / إن كان مشروعك node تأكد من تخديم الملفات الساكنة: app.use(express.static(__dirname + '/public')); اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
عبد النور محمد
لقد قمت بإعداد ملف تكوين webpack 5 بسيط مع خادم مطور يبدو أنه يعمل ولكن عندما أقوم بإضافة
إلى ملف index.html لم أحصل على تحميل CSS أخترت استخدام "style-loader" عبر "MiniCssExtractPlugin" لتمكين إعادة تحميل
لا توجد أخطاء في إخراج وحدة تحكم webpack
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.