Next.JS + AMP CSS

Question

I'm having trouble with AMP and CSS in Next.js.我在 Next.js 中遇到了 AMP 和 CSS 问题。 In my head component I have:在我的头部组件中，我有：

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

In the HTML source it shows up as <style amp-custom=""></style><style>(CSS Here)</style>在 HTML 源代码中，它显示为<style amp-custom=""></style><style>(CSS Here)</style>

In the console I get this error: The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.在控制台中，我收到此错误： The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.

How can I work with AMPHTML's rules on CSS and Next both?如何使用 AMPHTML 关于 CSS 和 Next 的规则？ Every other method I've tried (such as importing from a file using @zeit/next-sass) causes the CSS to not be rendered at all.我尝试过的所有其他方法（例如使用 @zeit/next-sass 从文件导入）都会导致 CSS 根本不被渲染。 This is the only working version I've found.这是我找到的唯一工作版本。

Answer 1

...It has to be: <style jsx>...</style> . ...它必须是： <style jsx>...</style> 。 Very dumb mistake that I've been looking for workarounds on all day.非常愚蠢的错误，我整天都在寻找解决方法。 :/ ：/

Answer 2

As of Sept 2020, I've been having this issue too.截至 2020 年 9 月，我也遇到了这个问题。 I'm new at this, but with no help from the official tutorials.我是新手，但没有官方教程的帮助。 I did find a workaround.我确实找到了解决方法。

First, I want to point out a couple of things from Next.js that they tell you.首先，我想指出他们告诉您的 Next.js 中的几件事。

non-AMP page styles are usually placed in _document.js from the next.js example.非 AMP 页面样式通常放在 next.js 示例中的 _document.js 中。

 </Head> <style jsx global>{ reset }</style> <style jsx global>{ globals }</style> <body> <Main /> <NextScript /> </body>

They mention in the tutorial to put <style amp-custom> .他们在教程中提到放置<style amp-custom> 。 They don't say where, but it should be within the <Head></Head> of index.js (or whatever .js file for individual pages) OR _document.js for every page.他们没有说在哪里，但它应该在 index.js 的<Head></Head> （或任何单个页面的 .js 文件）或每个页面的 _document.js 内。

Ok, sounds good, BUT it's partially wrong!好的，听起来不错，但部分错误！

I will explain what I found it does when turn on amp pages on in Next.JS.我将解释在 Next.JS 中打开 amp 页面时我发现它的作用。

So on an individual page, such as index.js, you need to this code at the top:因此，在单个页面上，例如 index.js，您需要在顶部添加以下代码：

 export const config = { amp: true, }

Then you have to put this in the return function:然后你必须把它放在返回函数中：

const isAmp = useAmp()常量 isAmp = useAmp()

Standard instructions from the tutorial.教程中的标准说明。 Now AMP is turned on, here's what happens:现在 AMP 已打开，会发生以下情况：

Anything in <style amp-custom> is turned into a <style> <style amp-custom>中的任何内容都会变成<style>
anything that is in <style jsx> is turned into a <style amp-custom> tag. <style jsx>中的任何内容都会变成<style amp-custom>标记。
In addition to #2, it injects a unique random index that ruins any css code in that gets put into the generated <style amp-custom> tag.除了 #2 之外，它还注入了一个唯一的随机索引，该索引会破坏任何放入生成的<style amp-custom>标记中的 css 代码。

 <style amp-custom>.jsx-2373233908{/* your CSS code that you put in <style jsx> from before */}</style>

and that .jsx-########### throws a "/ error CSS syntax error in tag 'style amp-custom' - incomplete declaration."并且 .jsx-############ 在标签 'style amp-custom' 中引发“/错误 CSS 语法错误 - 不完整的声明。” when you try to compile.当您尝试编译时。

Is this opposite and odd behavior.这是相反和奇怪的行为。 YES.是的。 I don't get why it does it, but I'm a newb.我不明白为什么会这样，但我是新手。

So my workaround goes like this:所以我的解决方法是这样的：

Install your CSS framework package or put your CSS file into the styles folder (let's say located at : ./styles/styles.css)安装您的 CSS 框架包或将您的 CSS 文件放入样式文件夹（假设位于：./styles/styles.css）
I also add raw loader from your terminal window.我还从您的终端窗口添加了原始加载程序。 Because I like to put my css in a file, not type it inlined with the code.因为我喜欢将我的 css 放在一个文件中，而不是将其与代码内联。 Let's be realistic, you're going to separate CSS and you'll need to load that file in.现实一点，你要分离 CSS，你需要加载那个文件。

npm install raw-loader --save-dev npm install raw-loader --save-dev

Load the CSS in your _document.js (here's my whole _document.js).在您的 _document.js 中加载 CSS（这是我的整个 _document.js）。 I use "}" and "{" with fixCSS to escape the .jsx-########### and the injected code magically disappears.我使用带有 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

That's it.而已。 Now your imported CSS is shown on AMP pages.现在，您导入的 CSS 会显示在 AMP 页面上。 Remember this is for sept 2020 using these packages in my package.json:请记住，这是 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 3

Try this:尝试这个：

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

Answer 4

Try:尝试：

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

I just tested it out and it worked okay.我刚刚测试了它，它工作正常。 Not the best approach, NextJS should document the ways to add css in somewhere.不是最好的方法，NextJS 应该记录在某处添加 css 的方法。

Answer 5

This worked:这有效：

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

<style jsx>{ampStyle}</style>

Next.JS + AMP CSS

问题描述

5 个解决方案

解决方案1
4 已采纳 2019-12-25 22:30:10

解决方案2
4 2020-09-03 23:19:43

解决方案3
4 2020-11-18 09:13:34

解决方案4
0 2020-01-20 13:59:53

解决方案5
0 2022-07-12 10:59:01

Next.JS + AMP CSS

问题描述

5 个解决方案

解决方案1 4 已采纳 2019-12-25 22:30:10

解决方案2 4 2020-09-03 23:19:43

解决方案3 4 2020-11-18 09:13:34

解决方案4 0 2020-01-20 13:59:53

解决方案5 0 2022-07-12 10:59:01

解决方案1
4 已采纳 2019-12-25 22:30:10

解决方案2
4 2020-09-03 23:19:43

解决方案3
4 2020-11-18 09:13:34

解决方案4
0 2020-01-20 13:59:53

解决方案5
0 2022-07-12 10:59:01