如何配置 next.js 以支持 amp 模式下的 css 文件？答案

【问题标题】：How to config next.js to support css file in amp mode?如何配置 next.js 以支持 amp 模式下的 css 文件？
【发布时间】：2019-12-05 16:09:31
【问题描述】：

默认情况下 next.js 创建一个外部文件并将 css 推送到它。但 amp 只支持内联样式。如何配置 next.js 以在 amp 模式下支持 css (tailwindcss)。现在 next.js 默认只支持 styled jsx amp 模式下的样式。我之前在spectrum.chat community问过这个问题，但没有得到任何答案。

【问题讨论】：

标签： css webpack amp-html next.js

【解决方案1】：

我尝试在 amp 页面上编写内联 CSS，但在控制台上没有看到我的 CSS 代码。在那之后，我找到了解决方案。我正在分享代码。我希望如此，它有助于解决您的错误。

const initialProperty = {
'amp-custom': '',
};

render() {
const styleElement = (
<style jsx {...initialProperty}>
{
`.example-button { color: black; }`
}
</style>
);
}
return (

<React.Fragment>
 {styleElement}
</React.Fragment>
)

【讨论】：

您的解决方案是对的，但我想使用 css 预处理器（postCss/scss）。
好的。我明白。我没有在 amp 页面上使用 CSS 预处理器。您是否在样式标签中尝试过示例 {% include "/assets/main.scss" %}？
是的。我希望 next.js 将 CSS 预处理器结果导出到输出 HTML 中的内联样式。
我明白了。如果您解决了问题，请与我分享，如果我找到解决方案，我会与您分享。
Next.js 9.2 支持内置 CSS 模块。我认为使用 amp 可以解决我的问题。