Next.JS + AMP CSS

Question

我在 Next.js 中遇到 AMP 和 CSS 的问题。在我的头部组件中，我有：

<Head>
    <style amp-custom>{`
        // CSS Here
    `}</style>
</Head>

在 HTML 来源中显示为 <style amp-custom=""></style><style>(CSS Here)</style>

在控制台中我得到这个错误：The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.

如何在 CSS 和 Next 上使用 AMPHTML 的规则？我尝试过的所有其他方法（例如使用@zeit/next-sass 从文件导入）都会导致 CSS 根本无法呈现。这是我找到的唯一可用版本。

Answer 1

...必须是：<style jsx>...</style>。非常愚蠢的错误，我整天都在寻找解决方法。 :/

Answer 2

尝试：

<style jsx amp-custom>
`
  ... my css
`
</style>

我刚刚测试了一下，效果还不错。这不是最好的方法，NextJS 应该记录在某处添加 css 的方法。

Answer 3

截至 2020 年 9 月，我也遇到了这个问题。我是新手，但没有官方教程的帮助。我确实找到了解决方法。

首先，我想指出他们告诉您的 Next.js 中的几件事。

non-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 页面时我发现它的作用

因此在单个页面上，例如 index.js，您需要在顶部添加此代码：

export const config = {
  amp: true,
}

然后你必须把它放在 return 函数中：

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-########### 抛出“/错误 CSS 标记 'style amp-custom' 中的语法错误 - 声明不完整。”当你尝试编译时。

这是相反的奇怪行为吗？是的。我不明白为什么会这样，但我是新手。

所以我的解决方法是这样的：

安装您的 CSS 框架包或将您的 CSS 文件放入样式文件夹（假设位于：./styles/styles.css）
我还从您的终端添加原始加载程序 window。因为我喜欢将 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"
  },

Answer 4

试试这个：

<Head>
    <style
      amp-custom=""
      dangerouslySetInnerHTML={{
        __html: `
          amp-img {
            border: 1px solid black;
          }
        `,
      }}
    ></style>
</Head>

Next.JS + AMP CSS

Next.JS + AMP CSS

css

reactjs

react-native

amp-html

next.js