截至 2020 年 9 月，我也遇到了这个问题。我是新手，但没有官方教程的帮助。我确实找到了解决方法。
首先，我想指出他们告诉您的 Next.js 中的几件事。
- 非 AMP 页面样式通常放在 next.js 示例中的 _document.js 中。
</Head>
<style jsx global>{ reset }</style>
<style jsx global>{ globals }</style>
<body>
<Main />
<NextScript />
</body>
- 他们在教程中提到将
<style amp-custom>。他们没有说在哪里，但它应该在 index.js 的<Head></Head> （或单个页面的任何 .js 文件）或每个页面的 _document.js 内。
好的，听起来不错，但有部分错误！
我将解释在 Next.JS 中打开 amp pages 时我发现它的作用。
所以在一个单独的页面上，比如index.js，你需要把这段代码放在最上面：
export const config = {
amp: true,
}
那你得把这个放到返回函数中：
const isAmp = useAmp()
教程中的标准说明。现在 AMP 已打开，会发生以下情况：
-
<style amp-custom> 中的任何内容都会变成<style>
-
<style jsx> 中的任何内容都将转换为 <style amp-custom> 标记。
-
除了 #2 之外，它还注入了一个唯一的随机索引，该索引会破坏任何放入生成的<style amp-custom> 标记中的 css 代码。
<style amp-custom>.jsx-2373233908{/* your CSS code that you put in <style jsx> from before */}</style>
并且 .jsx-########### 会在标签 'style amp-custom' 中引发“/错误 CSS 语法错误 - 不完整的声明。”当你尝试编译时。
这是相反和奇怪的行为。是的。我不明白为什么会这样，但我是新手。
所以我的解决方法是这样的：
- 安装您的 CSS 框架包或将您的 CSS 文件放入样式文件夹（假设位于：./styles/styles.css）
- 我还从您的终端窗口添加了原始加载程序。因为我喜欢将我的 css 放在一个文件中，而不是将其与代码内联。现实一点，你要分离 CSS，你需要加载那个文件。
npm install raw-loader --save-dev
- 在您的 _document.js 中加载 CSS（这是我的整个 _document.js）。我使用带有 fixCSS 的 "}" 和 "{" 来转义 .jsx-########### 并且注入的代码神奇地消失了。
import Document, { Html, Head, Main, NextScript } from 'next/document'
import styleCSS from '!!raw-loader!../styles/styles.css';
const fixCSS = `}${styleCSS}{`;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<Head>
</Head>
<style jsx>{`
${fixCSS}
` }</style>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
就是这样。现在，您导入的 CSS 会显示在 AMP 页面上。请记住，这是 2020 年 9 月在我的 package.json 中使用这些包的：
"dependencies": {
"amp": "^0.3.1",
"next": "^9.5.3-canary.25",
"next-env": "^1.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"cssnano": "^4.1.10",
"now": "^19.2.0",
"raw-loader": "^4.0.1"
},