如何使用Antd/Less和Sass/CSS模块配置Next.js

我想与Sass和CSS模块一起使用，但也希望使用，并且希望使用较少的样式来缩小建筑尺寸

---

我可以启用CSS模块或更少的加载程序，但不能同时启用两者。Next.js中的示例并没有帮助我解决这个问题。

经过数小时的研究，我终于找到了正确的解决方案，并希望与大家分享：

.babelrc

（这里没有魔法）

{
“预设”：[“下一个/巴别塔”]，
“插件”：[
[
“进口”，
{
“图书馆名称”：“antd”，
“风格”：真的吗
}
]
]
}

next.config.js

：

/*eslint禁用*/
const withLess=require（'@zeit/next less'）；
const WITHASS=require（“@zeit/next sass”）；
const-lessToJS=require（'less-vars-to-js'）；
常数fs=要求（'fs'）；
const path=require（'path'）；
//您的antd-custom.less文件所在的位置
const themeVariables=lessToJS(
fs.readFileSync（path.resolve（uu dirname，'./assets/antd custom.less'），'utf8'）
);
module.exports=withass({
cssModules：是的，
…没有({
LessLoader选项：{
javascriptEnabled:true，
modifyVars:themeVariables，//使您的antd自定义生效
导入加载程序：0
},
CSSLOADER选项：{
进口装载机：3，
localIdentName:“[local]\uuuu\uu[hash:base64:5]”
},
网页包：（配置，{isServer}）=>{
//让Ant样式使用更少的资源
如果（isServer）{
常量antStyles=/antd\/.\/style.*./；
常量origExternals=[…config.externals]；
config.externals=[
（上下文、请求、回调）=>{
if（request.match（antStyles））返回callback（）；
if（源外部[0]的类型==“函数”）{
origExternals[0]（上下文、请求、回调）；
}否则{
回调（）；
}
},
…（OrigeExternals[0]=='函数'？[]：OrigeExternals的类型）
];
config.module.rules.unshift({
测试：antStyles，
使用：“空加载程序”
});
}
返回配置；
}
})
});

最后一个提示是如何编写

with ass

with less

use，以及如何将

cssModules:true

放在外部对象中

虽然我已经在尝试从之前的示例中导出的不同组合：

为了完成此操作，我的

package.json中的依赖项如下：

。。。
“依赖项”：{
“@zeit/next less”：“^1.0.1”，
“@zeit/next sass”：“^1.0.1”，
“antd”：“^4.1.3”，
“babel插件导入”：“^1.13.0”，
“减去”：“^3.11.1”，
“减少js变量”：“^1.3.0”，
“下一步”：“^9.3.4”，
“节点sass”：“^4.13.1”，
“空加载程序”：“^3.0.0”，
“反应”：“^16.13.1”，
“react dom”：“^16.13.1”，
“sass”：“^1.26.3”
}
...

我希望这能帮助其他人更快地找到解决方案。：）
 
@zeit/next-less
已被弃用，并禁用next的内置CSS支持。它还使用了非常旧版本的
less
和
less-loader

我创建了一个包，通过复制SASS规则并为更少的文件和
更少的加载程序设置它们，从而减少了对Next.js的支持。它与
webpack5
标志一起工作


我们是否有可能使用“sass”而不是“@zeit/next sass”。我想使用NextJs 9.3附带的内置sass支持，同时使用更少的antd。当我们在webpack配置中使用外部css加载程序时，内置的sass支持就被禁用了。我尝试过，但没有找到解决方案。如果你找到一个，请告诉我/张贴它。最后一个解决我所需要的问题的方法-对我也有效，非常感谢@Holly是的，只需在_app.js中导入SCS并在其中编写全局样式：
:global{…}
@JustTB，我已经尝试了我的项目的配置，但CSS模块功能不起作用。[Next.js支持使用[name].module.CSS文件命名约定的CSS模块]（）。你对这个案子有什么建议吗？你能帮我检查并更正配置吗。非常感谢。谢谢你的包裹。另一个选择是使用webpack5，但似乎在2021年4月21日，他们还不支持webpack5。这就是我编写我的软件包（webpack5支持）的主要原因。此外，它还维护Next错误和文件加载程序的确切行为。这也不是蚂蚁特有的。@elado那太棒了！您能否在自述文件中添加一个覆盖某些
antd
变量的示例？我尝试将
lessVarsFilePath
添加到
next.config.js
（就像我们需要为下一个插件antd less做的那样），但没有效果。我为@elado的插件创建了一个新的插件，以添加一个自定义antd变量的选项。我们来看看会怎么样！：）