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

خادم Webpack 5 Dev لا يشغل CSS

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

السؤال

لقد قمت بإعداد ملف تكوين 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',
    }
};

 

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

Recommended Posts

  • 1

لا يتطلب وجود رابط مثل

<link href="/style.css" rel="stylesheet" />

في ملف html أداة تحميل في webpack.config.js. يبدو أنك تحصل على خطأ 404 في console في المتصفح يفيد بأن ملف غير موجود. إذا كانت هذه هي الحالة ، فإن الجزء 

href="/style.css" 

لا يشير إلى ملفك. لذلك تأكد من مسار الملف ثم حاول مرة أخرى

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

  • 0

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

<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'));

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...