2
votes

Suivant.JS + AMP CSS

J'ai des problèmes avec AMP et CSS dans Next.js. Dans ma tête, j'ai:

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

Dans la source HTML, il apparaît comme <style amp-custom=""></style><style>(CSS Here)</style>

Dans la console, j'obtiens cette erreur: The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.

Comment puis-je travailler avec les règles AMPHTML sur CSS et Next à la fois? Toutes les autres méthodes que j'ai essayées (comme l'importation à partir d'un fichier en utilisant @ zeit / next-sass) font que le CSS n'est pas du tout rendu. C'est la seule version fonctionnelle que j'ai trouvée.

reactjs react-native css next.js amp-html

0 commentaires

4 Réponses :

3
votes

... Il doit être: <style jsx>...</style> . Erreur très stupide sur laquelle j'ai cherché des solutions de contournement toute la journée. : /

1 commentaires

Je remarque que l'ajout ou non de la balise 'global' à l'élément 'style jsx' est la même chose. Tous les éléments de style vont à la balise de style amp-custom, car il ne peut y en avoir qu'un par page. Source officielle: amp.dev/documentation/guides-and-tutorials/develop/…

-1
votes

Essayer:

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

Je viens de le tester et cela a bien fonctionné. Ce n'est pas la meilleure approche, NextJS devrait documenter les façons d'ajouter du CSS quelque part.

1 commentaires

balise amp-custom dans l'élément de style comme aucun effet. cela fonctionne sans lui, donc il est redondant avec @Ethan answer.

2
votes

Depuis septembre 2020, j'ai aussi ce problème. Je suis nouveau dans ce domaine, mais sans l'aide des tutoriels officiels. J'ai trouvé une solution de contournement.

Tout d'abord, je tiens à souligner quelques éléments de Next.js qu'ils vous disent.

Les styles de page non AMP sont généralement placés dans _document.js de l'exemple next.js.

  "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"
  },

Ils mentionnent dans le tutoriel de mettre <style amp-custom> . Ils ne disent pas où, mais cela devrait être dans la <Head></Head> de index.js (ou n'importe quel fichier .js pour des pages individuelles) OU _document.js pour chaque page.

Ok, ça sonne bien, MAIS c'est partiellement faux!

J'expliquerai ce que j'ai trouvé qu'il fait lorsque vous activez les pages d'amplis dans Next.JS.

Donc, sur une page individuelle, telle que index.js, vous avez besoin de ce code en haut:

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

Ensuite, vous devez mettre ceci dans la fonction de retour:

const isAmp = useAmp ()

Instructions standard du tutoriel. Maintenant que l'AMP est activé, voici ce qui se passe:

Tout ce qui se trouve dans <style amp-custom> est transformé en <style>
tout ce qui est dans <style jsx> est transformé en une <style amp-custom> .
En plus du n ° 2, il injecte un index aléatoire unique qui ruine tout code css qui est placé dans la <style amp-custom> générée.

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

et que .jsx - ########### renvoie une "/ error erreur de syntaxe CSS dans la balise 'style amp-custom' - déclaration incomplète." lorsque vous essayez de compiler.

Est-ce un comportement opposé et étrange. OUI. Je ne comprends pas pourquoi il le fait, mais je suis un newb.

Donc, ma solution de contournement est la suivante:

Installez votre package de framework CSS ou placez votre fichier CSS dans le dossier styles (disons situé à: ./styles/styles.css)
J'ajoute également un chargeur brut depuis la fenêtre de votre terminal. Parce que j'aime mettre mon css dans un fichier, pas le taper en ligne avec le code. Soyons réalistes, vous allez séparer le CSS et vous devrez charger ce fichier.

npm installer raw-loader --save-dev

Chargez le CSS dans votre _document.js (voici tout mon _document.js). J'utilise "}" et "{" avec fixCSS pour échapper au .jsx - ########### et le code injecté disparaît comme par magie.

export const config = {
  amp: true,
}

C'est ça. Maintenant, votre CSS importé est affiché sur les pages AMP. N'oubliez pas que c'est pour septembre 2020 en utilisant ces packages dans mon package.json:

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

0 commentaires

1
votes

Essaye ça:

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

0 commentaires