如何让Next.js同时支持导入css和less

Posted 2020-12-21 zhaohd

最近在用Next.js （版本9.5.5）搭建项目时，发现css和less同时导入常常会报错，查阅一番资料后找到了一个靠谱的解决方案：
在目录下新建next.config.js文件，新增下列代码（先安装@zeit/next-less模块）

const path = require(‘path‘)
const withLess = require(‘@zeit/next-less‘)
module.exports = withLess({
    lessLoaderOptions: {
        javascriptEnabled: true,
        // modifyVars: themeVariables,
    },
    webpack: (config) => {
        const builtInLoader = config.module.rules.find((rule) => {
            if (rule.oneOf) {
                return (
                    rule.oneOf.find((deepRule) => {
                        if (deepRule.test && deepRule.test.toString().includes(‘/a^/‘)) {
                            return true;
                        }
                        return false;
                    }) !== undefined
                );
            }
            return false;
        });

        if (typeof builtInLoader !== ‘undefined‘) {
            config.module.rules.push({
                oneOf: [
                    ...builtInLoader.oneOf.filter((rule) => {
                        return (rule.test && rule.test.toString().includes(‘/a^/‘)) !== true;
                    }),
                ],
            });
        }

        return config;
    },
})

参考 https://github.com/vercel/next-plugins/issues/598#issuecomment-618461761