لود کردن css در فریمورک next.js

در صورتی که قصد دارید این حماقت رو کنید و ریکت ریداکس و next.js رو باهم استفاده کنید چالش های زیادی دارید.

یکی از چالش هایی که من باهاش برخورد کردم لود کردن css توی این ساختار بود که کمی اذیتم کرد.

بریم سر اصل مطلب

بعد از اینکه ریکت رو برای ssr یعنی همون server side rendering کانفیک کردید و از next.js برای اینکار استفاده کردید اولین مشکلی که میخورید اینه که باید زحمت بکشید و کامپوننت هایی که نوشتید منتقل کنید به یک دایرکتوری به اسم pages که توی روت پروژه ایجاد کردید.

یک نمونه پروژه که میتونه کمکتون کنه میزارم نگاه کنید.

حالا اگر بخاید توی کامپوننت ها از css استفاده کنید به مشکل میخورید و با انواع و اقسام خطاها روبرو میشید.برای لود کردن css کافیه کارهای زیر رو انجام بدید:

1. یک فایل به اسم next.config.js توی روت پروژه ایجاد کنید.
2. کد زیر رو توی این فایل قرار بدید

const withCSS = require('@zeit/next-css');

function HACK_removeMinimizeOptionFromCssLoaders(config) {
    console.warn(
        'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
    );
    config.module.rules.forEach(rule => {
        if (Array.isArray(rule.use)) {
            rule.use.forEach(u => {
                if (u.loader === 'css-loader' && u.options) {
                    delete u.options.minimize;
                }
            });
        }
    });
}

module.exports = withCSS({
    webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config);
        return config;
    },
});

3.خب حالا نیازه که یک پکیج هم نصب کنید . برا اینکار توی ترمینال جنوب اینو بزنید.

npm install --save @zeit/next-css

تموم شد.

یادتون نره npm رو دوباره ران کنید وگنه تغییرات اعمال نمیشه.

اگر وقت داشتید یه کم راجع به webpack هم مطالعه داشته باشید.