Next.js + AMP CSS

Question

Next.js + AMP CSS

3

我在Next.js中遇到了AMP和CSS方面的问题。在我的head组件中，我有以下代码：

<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)'. 如何同时处理AMPHTML和Next的CSS规则？我尝试过其他方法（例如使用@zeit/next-sass从文件导入），但会导致CSS根本未呈现。这是我找到的唯一有效的版本。

- user2157850

5个回答

4

需要更正为：<style jsx>...</style>。这是一个非常愚蠢的错误，导致我一整天都在寻找解决方法 :/

- user2157850

我注意到在'style jsx'元素中添加'global'标签与不添加是一样的。所有的样式元素都会进入amp-custom样式标签，因为每个页面只能有一个amp-custom样式标签。官方来源：https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/ - MiguelSlv

4

截至2020年9月，我也遇到了这个问题。虽然我是新手，但官方教程没有给予任何帮助。不过，我找到了一个解决方法。

首先，我想指出Next.js中一些告诉你的事情。

1. 非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（或针对各个页面的任何.js文件）的<Head></Head>内，或者用于每个页面的_document.js。

好的，听起来不错，但部分是错误的！

我将解释在Next.JS中启用AMP页面时发现的内容。

因此，在单独的页面（例如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-###########会抛出一个"/错误CSS语法错误标签 'style amp-custom' - 不完整的声明。"这是相反和奇怪的行为。我不知道它为什么这样做，但我是新手。

所以我的解决方法如下：

安装您的CSS框架包或将CSS文件放入styles文件夹中（假设位于：./styles/styles.css）
我还从终端窗口添加了raw-loader。因为我喜欢将我的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"
  },

- ProgressGuide

谢谢，这对我的用例非常有效，我需要在/pages目录中有一个特定的amp文件。 - Staghouse

0

尝试：

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

我刚刚测试了一下，它运行得还不错。虽然不是最好的方法，但 NextJS 应该在某个地方记录添加 CSS 的方式。

- Matt Claffey

amp-custom标签在样式元素中没有任何效果。它可以不用，因此与@Ethan的答案重复了。 - MiguelSlv

0

这个有效：

const ampStyle = `h1{color:red;}`

<style jsx>{ampStyle}</style>

- Piyush

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yubin · Accepted Answer

试一下这个：

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