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

السؤال

نشر

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...