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

السؤال

نشر

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

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

 

  • 1
نشر

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

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

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

href="/style.css" 

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...