Next.js: [RFC] CSS рд╕рдкреЛрд░реНрдЯ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 4 рд╕рд┐рддре░ 2019  ┬╖  60рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vercel/next.js

рд▓рдХреНрд╖реНрдп

  • рд╡реИрд╢реНрд╡рд┐рдХ CSS рдкреНрд░рднрд╛рд╡реЛрдВ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░реЗрдВ (рдЬреИрд╕реЗ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк, Normalize.css, UX- рдкреНрд░рджрд╛рди, рдЖрджрд┐)
  • рд╕реНрдерд┐рд░ рдШрдЯрдХ-рд╕реНрддрд░реАрдп CSS рдХрд╛ рд╕рдорд░реНрдерди рдХрд░реЗрдВ
  • рд╡рд┐рдХрд╛рд╕ рдореЗрдВ рд╣реЙрдЯ-рд░реАрд▓реЛрдб рд╢реИрд▓реА рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрди (рдХреЛрдИ рдкреГрд╖реНрда рддрд╛рдЬрд╝рд╛ рдпрд╛ рд░рд╛рдЬреНрдп рд╣рд╛рдирд┐ рдирд╣реАрдВ)
  • рдЙрддреНрдкрд╛рджрди рдореЗрдВ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╕реАрдПрд╕рдПрд╕ рдирд┐рд╖реНрдХрд░реНрд╖рдг рдХреЗ рд▓рд┐рдП рдХреЛрдб-рд╡рд┐рднрд╛рдЬрди рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо
  • рдореМрдЬреВрджрд╛ рдХрдиреНрд╡реЗрдВрд╢рди рдХреЗ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдкрд░рд┐рдЪрд┐рдд рд╣реИрдВ (рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рд░рд┐рдПрдХреНрдЯ рдРрдк рдмрдирд╛рдПрдВ)
  • рдореМрдЬреВрджрд╛ styled-jsx рд╕рдорд░реНрдерди, рд╕рдВрднрд╡рддрдГ рдЕрдзрд┐рдХ рдЕрдиреБрдХреВрд▓рд┐рдд

рдкреГрд╖реНрдарднреВрдорд┐

рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдореЗрдВ рдЖрдпрд╛рдд рдХрд░рдирд╛ рдПрдХ рд╡реЗрдмрдкреИрдХ рдЬреИрд╕реЗ рдЖрдзреБрдирд┐рдХ рджрд┐рди рдмрдВрдбрд▓реЛрдВ рджреНрд╡рд╛рд░рд╛ рд▓реЛрдХрдкреНрд░рд┐рдп рдЕрднреНрдпрд╛рд╕ рд╣реИред

рд╣рд╛рд▓рд╛рдБрдХрд┐, рдпрд╣ рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рд╕рд╣реА рдкрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдореБрд╢реНрдХрд┐рд▓ рд╣реИ: рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЗ рд╡рд┐рдкрд░реАрдд, рд╕рднреА рд╕реАрдПрд╕рдПрд╕ рд╡рд┐рд╢реНрд╡ рд╕реНрддрд░ рдкрд░ рд╕реНрдХреВрдк рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдЗрд╕рдХрд╛ рдорддрд▓рдм рдпрд╣ рд╣реИ рдХрд┐ рдпрд╣ рдЦреБрдж рдХреЛ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдмрд╛рдВрдзрдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдзрд╛рд░ рдирд╣реАрдВ рджреЗрддрд╛ рд╣реИред рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдХрдИ рдкреГрд╖реНрдареЛрдВ рдХреЗ рдмреАрдЪ рдмрдВрдбрд▓рд┐рдВрдЧ рдЬрд╣рд╛рдВ рд╕реНрдЯрд╛рдЗрд▓ рдкреНрд░рддрд┐ рдкреГрд╖реНрда рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдЕрд▓рдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рдСрд░реНрдбрд░ рдорд╛рдорд▓реЛрдВ рдХреЛ рд▓реЛрдб рдХрд░рддрд╛ рд╣реИред

рд╣рдорд╛рд░реЗ рдорд╛рдк рд╕реЗ, рдиреЗрдХреНрд╕реНрдЯ.рдЬреЗрдПрд╕ рдХреЗ 50% рд╕реЗ рдЕрдзрд┐рдХ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ .css рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдмрдВрдбрд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд░рддреЗ рд╣реИрдВ, рдпрд╛ рддреЛ @zeit/next-css , @zeit/next-sass , @zeit/next-less , рдпрд╛ рдЕрдиреБрдХреВрд▓рд┐рдд рд╕реНрдерд╛рдкрдирд╛ред рдХрдВрдкрдирд┐рдпреЛрдВ рд╕реЗ рдмрд╛рдд рдХрд░рдиреЗ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЗрд╕реЗ рдФрд░ рд╕рддреНрдпрд╛рдкрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдХреБрдЫ рдХреЗ рдкрд╛рд╕ рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЕрдкрдиреА рд╕рднреА рд╢реИрд▓рд┐рдпреЛрдВ рд╣реИрдВ, рдЕрдиреНрдп рдЗрд╕реЗ рд╡реИрд╢реНрд╡рд┐рдХ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдлрд┐рд░ рд╕реНрдЯрд╛рдЗрд▓ рдШрдЯрдХреЛрдВ рдХреЗ рд▓рд┐рдП рд╕реАрдПрд╕рдПрд╕-рдЗрди-рдЬреЗрдПрд╕ рд╕рдорд╛рдзрд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред

рд╡рд░реНрддрдорд╛рди рдореЗрдВ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдпреЗ рддреАрди рдкреНрд▓рдЧрдЗрдиреНрд╕ рд╣реИрдВ рдЬреЛ рдЖрдкрдХреЛ рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддреЗ рд╣реИрдВ, рд╣рд╛рд▓рд╛рдВрдХрд┐, рд╕реАрдПрд╕рдПрд╕ рдСрд░реНрдбрд░рд┐рдВрдЧ рдФрд░ рдХреБрдЫ рд▓реЛрдбрд┐рдВрдЧ рдореБрджреНрджреЛрдВ рдореЗрдВ рдЙрдирдХреА рд╕рд╛рдорд╛рдиреНрдп рд╕рдорд╕реНрдпрд╛ рд╣реИред рдЗрд╕рдХрд╛ рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ @zeit/next-css рд╡реИрд╢реНрд╡рд┐рдХ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рдореНрдореЗрд▓рди рдХреЛ рд▓рд╛рдЧреВ рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдЧреНрд▓реЛрдмрд▓ рд╕реАрдПрд╕рдПрд╕ рдкрд░рд┐рдпреЛрдЬрдирд╛ рдореЗрдВ рд╣рд░ рдШрдЯрдХ / рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдЖрдпрд╛рдд рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред

рдЗрди рд╕рд╛рдорд╛рдиреНрдп рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдФрд░ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЛ рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдореЗрдВ рдЖрд╕рд╛рди рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдо рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдХреЗ рд▓рд┐рдП рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рд╕рдорд░реНрдерди рдкреЗрд╢ рдХрд░рдиреЗ рдХреА рдпреЛрдЬрдирд╛ рдмрдирд╛ рд░рд╣реЗ рд╣реИрдВред рдпрд╣ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдХреЗ рд╕рдорд╛рди рд╣реЛрдЧрд╛ рдЬрд╣рд╛рдВ рдпрджрд┐ рдЖрдк рдлреАрдЪрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ рддреЛ рдХреЛрдИ рдирд┐рд░реНрдорд┐рдд рд╕рдордп рдпрд╛ рд░рдирд╡реЗ рдУрд╡рд░рд╣реЗрдб рдирд╣реАрдВ рд╣реЛрдЧрд╛ред

рдпрд╣ рдкреНрд░рдпрд╛рд╕ рд╣рдореЗрдВ рд╕рдорд╛рдзрд╛рди рдХреЗ рдбреЗрд╡рд▓рдкрд░ рдЕрдиреБрднрд╡ рдореЗрдВ рд╕реБрдзрд╛рд░ рдХрд░рдиреЗ рдХреА рднреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред

рдкреНрд░рд╕реНрддрд╛рд╡

Next.js рдХреЛ рдЖрдзреБрдирд┐рдХ CSS рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреА рдУрд░ рд╕реЗ рдЗрд╕реЗ рдбрд╛рдЙрди-рд▓реЗрд╡рд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрд╣ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдЖрдзреБрдирд┐рдХ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдиреЗ рдФрд░ рдЗрд╕реЗ ES5 рдХреЗ рд▓рд┐рдП рд╕рдВрдХрд▓рд┐рдд рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдХреЗ рд╕рдорд╛рди рд╣реЛрдЧрд╛ред

рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ, рд╣рдореЗрдВ рдЪрд╛рд╣рд┐рдП:

рд╡рд┐рдХрд╛рд╕ рдХреЗ рджреМрд░рд╛рди, рд╕реАрдПрд╕рдПрд╕ рд╕рдВрдкрд╛рджрди рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рд▓рд╛рдЧреВ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП, рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рд╣реЙрдЯ рд▓реЛрдбрд┐рдВрдЧ рдХреЗ рд╕рдорд╛рдиред

рдЙрддреНрдкрд╛рджрди рдореЗрдВ, рд╕рднреА CSS рдХреЛ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдмрдВрдбрд▓ (рдПрд╕) рд╕реЗ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдирд┐рдХрд╛рд▓рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ .css рдлрд╛рдЗрд▓реЛрдВ рдореЗрдВ рдЙрддреНрд╕рд░реНрдЬрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдпрд╣ .css рдХреЛрдб-рд╡рд┐рднрд╛рдЬрди (рдЬрдм рд╕рдВрднрд╡ рд╣реЛ) рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рддрд╛рдХрд┐ рдкреГрд╖реНрда рд▓реЛрдб рдкрд░ рдХреЗрд╡рд▓ рдорд╣рддреНрд╡рдкреВрд░реНрдг-рдкрде CSS рдбрд╛рдЙрдирд▓реЛрдб рд╣реЛред

рдЧреНрд▓реЛрдмрд▓ рд╕реАрдПрд╕рдПрд╕

Next.js рдХреЗрд╡рд▓ рдЖрдкрдХреЛ рдХрд╕реНрдЯрдо pages/_app.js рднреАрддрд░ Global CSS рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдЧрд╛ред

рдпрд╣ рдПрдХ рдмрд╣реБрдд рд╣реА рдорд╣рддреНрд╡рдкреВрд░реНрдг рдЕрдВрддрд░ рд╣реИ (рдФрд░ рдЕрдиреНрдп рд░реВрдкрд░реЗрдЦрд╛рдУрдВ рдореЗрдВ рдПрдХ рдбрд┐рдЬрд╛рдЗрди рджреЛрд╖), рдХреНрдпреЛрдВрдХрд┐ рдЧреНрд▓реЛрдмрд▓ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЖрдкрдХреЗ рдЖрд╡реЗрджрди рдореЗрдВ рдХрд╣реАрдВ рднреА рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдиреЗ рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдХреА рдХреИрд╕реНрдХреЗрдбрд┐рдВрдЧ рдкреНрд░рдХреГрддрд┐ рдХреЗ рдХрд╛рд░рдг рдХреБрдЫ рднреА рдХреЛрдб-рд╡рд┐рднрд╛рдЬрди рдирд╣реАрдВ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

рдпрд╣ рдПрдХ рдЬрд╛рдирдмреВрдЭрдХрд░ рдмрд╛рдзрд╛ рд╣реИред рдХреНрдпреЛрдВрдХрд┐ рдЬрдм рд╡реИрд╢реНрд╡рд┐рдХ рд╕реАрдПрд╕рдПрд╕ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдЖрдпрд╛рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рддреЛ рдПрдХ рдШрдЯрдХ, рдПрдХ рдкреГрд╖реНрда рд╕реЗ рджреВрд╕рд░реЗ рдкреГрд╖реНрда рдкрд░ рдЬрд╛рдиреЗ рдкрд░ рднрд┐рдиреНрди рд╡реНрдпрд╡рд╣рд╛рд░ рдХрд░реЗрдЧрд╛ред

рдЙрдкрдпреЛрдЧ рдЙрджрд╛рд╣рд░рдг

/* styles.css */
.red-text {
  color: red;
}
// pages/_app.js
import '../styles.css'

export default () => <p className="red-text">Hello, with red text!</p>

рдШрдЯрдХ-рд╕реНрддрд░ рд╕реАрдПрд╕рдПрд╕

Next.js рдЖрдкрдХреЗ рдЖрд╡реЗрджрди рдореЗрдВ рдХрд╣реАрдВ рднреА рд╢реБрджреНрдз CSS рдореЙрдбреНрдпреВрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдЧрд╛ред

рдШрдЯрдХ-рд╕реНрддрд░ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдХреЗ рдирд╛рдордХрд░рдг рдХреЗ рдкрд╛рд▓рди рдХрд╛ рдкрд╛рд▓рди рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рддрд╛рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рд╡рд┐рдирд┐рд░реНрджреЗрд╢ рдХреЗ рд╕рд╛рде рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЬрд╛рдиреЗ рдХреЗ рдЕрдкрдиреЗ рдЙрджреНрджреЗрд╢реНрдп рдХреЛ рдЗрдВрдЧрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП .module.css рд╣реЛред

:global() CSS рдореЙрдбреНрдпреВрд▓ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рддрдм рджреА рдЬрд╛рддреА рд╣реИ рдЬрдм рдХрд┐рд╕реА рд╕реНрдерд╛рдиреАрдп рд╡рд░реНрдЧ рдХреЗ рдирд╛рдо рдХреЗ рд╕рд╛рде рдЬреЛрдбрд╝рд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЬреИрд╕реЗ .foo :global(.bar) { ... } ред

рдЙрдкрдпреЛрдЧ рдЙрджрд╛рд╣рд░рдг

/* components/button.module.css */
.btnLarge {
  padding: 2rem 1rem;
  font-size: 1.25rem;
}

.foo :global(.bar) {
  /* this is allowed as an escape hatch */
  /* (useful when controlling 3rd party libraries) */
}

:global(.evil) {
  /* this is not allowed */
}
/* components/button.js */
import { btnLarge } from './button.module.css'

// import '../styles.css'; // <-- this would be an error

export function Button({ large = false, children }) {
  return (
    <button
      className={
        large
          ? // Imported from `button.module.css`: a unique class name (string).
            btnLarge
          : ''
      }
    >
      {children}
    </button>
  )
}

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдЬреЛ рдХреБрдЫ рднреА рд╣рдо рдпрд╣рд╛рдВ рдХрд░рддреЗ рд╣реИрдВ, рд╣рдо рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдХрд╕реНрдЯрдо рдкреЛрд╕реНрдЯрд╕реАрдПрд╕рдПрд╕ рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЕрднреА рднреА рдЖрд╕рд╛рди рд╣реИ рдЬреИрд╕реЗ рдХрд┐ рдпрд╣ рдЕрдм @zeit/next-css ? рдпрд╣ рдПрдХ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рд╢рд░реНрдо рдХреА рдмрд╛рдд рд╣реЛрдЧреА рдпрджрд┐ рд╣рдо рдЙрд╕ рдХреЗ рд▓рд┐рдП рд╕рдорд░реНрдерди рдЦреЛ рджреЗрддреЗ рд╣реИрдВ - рд╕реАрдЖрд░рдП рдЗрд╕рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЗрд╕рдХреА рд╡рдЬрд╣ рд╕реЗ рдХрд┐рд╕реА рднреА рддрд░рд╣ рд╕реЗ рдЙрдЪрд┐рдд рддрд░реАрдХреЗ рд╕реЗ рдЯреЗрд▓рд╡рд┐рдВрдб рд╕реАрдПрд╕рдПрд╕ рдЬреИрд╕реЗ рдЙрдкрдХрд░рдгреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЕрд╕рдВрднрд╡ рд╣реИред

рдореИрдВ рдЗрд╕ рд╕рдВрдмрдВрдз рдореЗрдВ рдЗрди рддреАрди рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕рд╛рд╡рдзрд╛рди рд░рд╣реВрдВрдЧрд╛:

  • рд╕реНрд╡рддрдГ-рд╡рд┐рд╢рд┐рд╖реНрдЯ рдЙрдкрд╕рд░реНрдЧреЛрдВ рдХреЛ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдСрдЯреЛрдкреНрд░реЗрдХреНрд╕рд┐рдлрд╝рд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ (рд╡рд┐рд░рд╛рд╕рдд рдлреНрд▓реЗрдХреНрд╕рдмреЙрдХреНрд╕ рд╕рдорд░реНрдерди рдХреЗ рдмрд┐рдирд╛)
  • рдкреЙрд▓рд┐рдлрд╝рд┐рд▓ рдпрд╛ рдХрдВрдкрд╛рдЗрд▓ рд╕реНрдЯреЗрдЬ 3+ рд╕реАрдПрд╕рдПрд╕ рдХреА рд╡рд┐рд╢реЗрд╖рддрд╛рдПрдВ рдЙрдирдХреЗ рд╕рдордХрдХреНрд╖ рд╣реИрдВ
  • рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рд▓рд┐рдП рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдЬреНрдЮрд╛рдд "рдлреНрд▓реЗрдХреНрд╕рдмрдЧреНрд╕" рдХреЛ рдареАрдХ рдХрд░реЗрдВ

... рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рд╕рдм PostCSS рдХреЗ рд╕рд╛рде рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ рдпрд╣ рдмрд╣реБрдд рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ рдХрд┐ PostCSS рдкреНрд▓рдЧрдЗрди рдСрд░реНрдбрд░ рдЕрдВрддрд┐рдо-рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рдирд┐рдпрдВрддреНрд░рдг рдореЗрдВ рд╣реЛред

рдореЗрд░рд╛ рд╕реБрдЭрд╛рд╡ рд╣реИ рдХрд┐ рдпрджрд┐ рдЖрдк рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рдЙрди рддреАрди рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХреЛ рд╕рдХреНрд╖рдо рдХрд░рдиреЗ рдЬрд╛ рд░рд╣реЗ рд╣реИрдВ, рддреЛ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ postcss.config.js рдлрд╝рд╛рдЗрд▓ рдкреНрд░рджрд╛рди рдХрд░рдХреЗ рдбрд┐рдлрд╝реЙрд▓реНрдЯ PostCSS рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреЛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдУрд╡рд░рд░рд╛рдЗрдб рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрджрд┐ рд╡реЗ рдЗрд╕ рдорд╛рд░реНрдЧ рдкрд░ рдЧрдП рдереЗ, рддреЛ рдЙрдиреНрд╣реЗрдВ рдЙрди рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛, рд▓реЗрдХрд┐рди рдореЗрд░реА рд░рд╛рдп рдореЗрдВ рдирд┐рдпрдВрддреНрд░рдг рдХрд╛ рд╕реНрддрд░ рдЖрд╡рд╢реНрдпрдХ рд╣реИред

TL; DR рдХреГрдкрдпрд╛ рд╕рд╛рд╡рдзрд╛рди рд░рд╣реЗрдВ рдХрд┐ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП PostCSS рдкрд░ рдкреВрд░реНрдг рдирд┐рдпрдВрддреНрд░рдг рд░рдЦрдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рди рдЯреВрдЯреЗ, рдореИрдВ рд╢рд╛рдмреНрджрд┐рдХ рд░реВрдк рд╕реЗ рдЗрд╕ рд╡рдЬрд╣ рд╕реЗ CRA рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдФрд░ рдЕрдЧрд░ рдореИрдВ рдЕрдм рдФрд░ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рдкрд╛рдКрдВрдЧрд╛ рддреЛ рдореБрдЭреЗ рдмрд╣реБрдд рджреБрдЦ рд╣реЛрдЧрд╛ред

рд╕рднреА 60 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдореИрдВ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╡рд░реНрддрдорд╛рди рд╕рдорд░реНрдерд┐рдд рд╕реНрд╡рд╛рдж рдХреЗ рд╕рд╛рде @zeit/next-sass рдЬреИрд╕реЗ рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХреЗ рд╕рд╛рде рдЕрдиреБрдорд╛рди рд▓рдЧрд╛ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ .module.scss рднреА рдХрд╛рдо рдХрд░реЗрдЧрд╛? рдпрд╛ рд╡рд╛рдХреНрдпрд╛рдВрд╢ "рд╢реБрджреНрдз рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓" рдХрд╛ рдЕрд░реНрде рдХреЗрд╡рд▓ .module.css ?

рд╕реИрд╕ рд╕рдорд░реНрдерди рдЗрд╕реЗ рдмрдирд╛рддреЗ рд╣реИрдВ рдпрд╛ рдЗрд╕реЗ рдЬреНрдпрд╛рджрд╛рддрд░ рдкрд░рд┐рдпреЛрдЬрдирд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдореБрдЭреЗ рддреЛрдбрд╝ рджреЗрддреЗ рд╣реИрдВред

@zeit/next-css/sass/less/stylus рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХреЛ рдЗрд╕ RFC (рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рд╕рдорд░реНрдерди) рдХреЗ рдкрдХреНрд╖ рдореЗрдВ рдЪрд┐рддреНрд░рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред рд╣рдо рдЕрднреА рднреА рдЪрд░реНрдЪрд╛ рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдХрд┐ рдХрд┐рд╕ рдкреНрд░рдХрд╛рд░ sass рдХреЛрд░ рдмрдирд╛рдо рдПрдХ рдкреНрд▓рдЧрдЗрди рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реЛрдЧрд╛ред рдореЗрд░реА рд╡рд░реНрддрдорд╛рди рд╕реЛрдЪ рдпрд╣ рд╣реИ рдХрд┐ рдЬрдм рдЖрдк node-sass рдЬреЛрдбрд╝реЗрдВрдЧреЗ рддреЛ рдпрд╣ sass рд╕рдкреЛрд░реНрдЯ рдХреЛ рд╕рдХреНрд╖рдо рдХрд░реЗрдЧрд╛ред рдЬреИрд╕рд╛ рд╣рдо рдЯрд╛рдЗрдкрд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЗ рд▓рд┐рдП рдХрд░рддреЗ рд╣реИрдВ, рд╡реИрд╕рд╛ рд╣реАред рд╣рдо рдЗрд╕реЗ рдПрдХ рдирд┐рд░реНрднрд░рддрд╛ рдХреЗ рд░реВрдк рдореЗрдВ рдирд╣реАрдВ рдЬреЛрдбрд╝реЗрдВрдЧреЗ рдХреНрдпреЛрдВрдХрд┐ рджреЗрд╢реА рдмрд╛рдЗрдВрдбрд┐рдВрдЧ рдЖрджрд┐ рдХреЗ рдХрд╛рд░рдг рдпрд╣ рдХрд╛рдлреА рдмрдбрд╝рд╛ рдФрд░ рдмрд╣реБрдд рдзреАрдорд╛ рд╣реИред

рдпрд╣ рд░реЛрдорд╛рдБрдЪрдХ рд╣реИ! рдореИрдВ рдЖрдЬ рд╣реА рдХреЗ рд░реВрдк рдореЗрдВ рд╕реАрдПрд╕рдПрд╕ рд╡рд░реНрдЧ рдХреЗ рдирд╛рдо рдкрд░ рд╡рд┐рд╡рд╛рдж рдХрд░ рд░рд╣рд╛ рдерд╛!

рдкреНрд░рд╢реНрди, рдпрд╣ рдЯрд╛рдЗрдкрд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЗ рд╕рд╛рде рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдПрдХ рдХрд╛рд░рдг рд╣реИ рдХрд┐ рдореИрдВрдиреЗ рд╕реАрдПрд╕рдПрд╕-рдореЙрдбреНрдпреВрд▓ рдХреЛ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ, рд╡рд╣ рдпрд╣ рд╣реИ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдЖрдпрд╛рдд рдХрд░рдиреЗ рд╕реЗ рдХреЛрдИ рд╡рд╕реНрддреБ рдорд┐рд▓реЗрдЧреА (рд╢рд╛рдпрдж рдереЛрдбрд╝рд╛ рдЬрд╛рджреБрдИ, рдЬреИрд╕реЗ .foo-bar рдПрдХ рдХреНрд╖реЗрддреНрд░ рдмрди рдЬрд╛рдПрдЧрд╛ рдЬрд┐рд╕реЗ fooBar ?)ред рдЬреЛ TS рдХреЗ рдЕрдиреБрдХреВрд▓ рдирд╣реАрдВ рд╣реИред рдЪреВрдВрдХрд┐ рдЕрдЧрд▓рд╛ рдЕрдм рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рдЯреАрдПрд╕ рд╣реИ, рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдо рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рдмреЗрд╣рддрд░ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ?

рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ "рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рд▓рд┐рдП рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдЬреНрдЮрд╛рдд рдлреНрд▓реЗрдХреНрд╕рдмрдЧреНрд╕ рдХреЛ рдареАрдХ рдХрд░реЗрдВ" рдПрдХ рдЕрдЪреНрдЫрд╛ рд╡рд┐рдЪрд╛рд░ рд╣реИред

рдореБрдЭреЗ рдбрд░ рд╣реИ рдХрд┐ рд╣рдо рднреНрд░рд╛рдордХ рдкрд░рд┐рджреГрд╢реНрдпреЛрдВ рдореЗрдВ рд╕рдорд╛рдкреНрдд рд╣реЛ рдЬрд╛рдПрдВрдЧреЗ, рдЬрд╣рд╛рдВ npm рдкрд░ рддреАрд╕рд░реЗ рдкрдХреНрд╖ рдХреЗ рдШрдЯрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп, рдЬрд┐рд╕рдореЗрдВ рд╕реАрдПрд╕рдПрд╕ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рд╢рд╛рдорд┐рд▓ рд╣реИрдВ, рджреВрд╕рд░реЛрдВ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдЕрдЧрд▓реА рдкреАрдврд╝реА рдХреЗ рд╡рд╛рддрд╛рд╡рд░рдг рдореЗрдВ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╡реНрдпрд╡рд╣рд╛рд░ рдХрд░реЗрдВрдЧреЗ (рдЬреИрд╕реЗ рдХрд┐ рдХреНрд░рд┐рдПрдЯ-рд░рд┐рдПрдХреНрд╢рди-рдРрдк)ред

@TheHolyWaffle рдЬрд╛рдирд╛ рдЬрд╛рддрд╛ flexbugs рдлрд┐рдХреНрд╕рд┐рдВрдЧ рдПрдХ рдЕрдзрд┐рдХ рдкреВрд░реНрд╡рд╛рдиреБрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдмрдирд╛рддрд╛ рд╣реИ - рдФрд░ рднреА рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ рдХреНрдпрд╛ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдЕрдиреБрдкреНрд░рдпреЛрдЧ рдХрд░рддрд╛ рд╣реИред

рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рд╡рд┐рдирд┐рд░реНрджреЗрд╢ рдкреНрд░рддрд┐ @zenozen , рдпрд╣ рдЖрдк рдХреЗ рд▓рд┐рдП рдКрдВрдЯ рдХреЗ рд▓рд┐рдП рдлреИрдВрд╕реА рдХреБрдЫ рднреА рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдпрджрд┐ рдЖрдк рдбреИрд╢ рдХреЗ рд╕рд╛рде рд╡рд░реНрдЧ рдирд╛рдореЛрдВ ( class-name ) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХреЛ рдЙрд╕ рд╡рд╕реНрддреБ рдкрд░ рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ рдкрд╣реБрдБрдЪ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреАред

рдЬреИрд╕реЗ

import Everything from './file.module.css'

// later on

Everything['class-name']

рдЯреАрдПрд╕ рдХреЗ рд▓рд┐рдП, рд╣рдо рдкреНрд░рдХрд╛рд░реЛрдВ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рд╕реА рднреА рдЬрд╛рджреВ рдХреА рдпреЛрдЬрдирд╛ рдирд╣реАрдВ рдмрдирд╛рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЗрди рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдЯреАрдПрд╕ рдкреНрд░рдХрд╛рд░ рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░рдирд╛ рдмрд╣реБрдд рдЖрд╕рд╛рди рд╣реИред

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

рдЬреЛ рдХреБрдЫ рднреА рд╣рдо рдпрд╣рд╛рдВ рдХрд░рддреЗ рд╣реИрдВ, рд╣рдо рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдХрд╕реНрдЯрдо рдкреЛрд╕реНрдЯрд╕реАрдПрд╕рдПрд╕ рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЕрднреА рднреА рдЖрд╕рд╛рди рд╣реИ рдЬреИрд╕реЗ рдХрд┐ рдпрд╣ рдЕрдм @zeit/next-css ? рдпрд╣ рдПрдХ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рд╢рд░реНрдо рдХреА рдмрд╛рдд рд╣реЛрдЧреА рдпрджрд┐ рд╣рдо рдЙрд╕ рдХреЗ рд▓рд┐рдП рд╕рдорд░реНрдерди рдЦреЛ рджреЗрддреЗ рд╣реИрдВ - рд╕реАрдЖрд░рдП рдЗрд╕рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЗрд╕рдХреА рд╡рдЬрд╣ рд╕реЗ рдХрд┐рд╕реА рднреА рддрд░рд╣ рд╕реЗ рдЙрдЪрд┐рдд рддрд░реАрдХреЗ рд╕реЗ рдЯреЗрд▓рд╡рд┐рдВрдб рд╕реАрдПрд╕рдПрд╕ рдЬреИрд╕реЗ рдЙрдкрдХрд░рдгреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЕрд╕рдВрднрд╡ рд╣реИред

рдореИрдВ рдЗрд╕ рд╕рдВрдмрдВрдз рдореЗрдВ рдЗрди рддреАрди рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕рд╛рд╡рдзрд╛рди рд░рд╣реВрдВрдЧрд╛:

  • рд╕реНрд╡рддрдГ-рд╡рд┐рд╢рд┐рд╖реНрдЯ рдЙрдкрд╕рд░реНрдЧреЛрдВ рдХреЛ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдСрдЯреЛрдкреНрд░реЗрдХреНрд╕рд┐рдлрд╝рд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ (рд╡рд┐рд░рд╛рд╕рдд рдлреНрд▓реЗрдХреНрд╕рдмреЙрдХреНрд╕ рд╕рдорд░реНрдерди рдХреЗ рдмрд┐рдирд╛)
  • рдкреЙрд▓рд┐рдлрд╝рд┐рд▓ рдпрд╛ рдХрдВрдкрд╛рдЗрд▓ рд╕реНрдЯреЗрдЬ 3+ рд╕реАрдПрд╕рдПрд╕ рдХреА рд╡рд┐рд╢реЗрд╖рддрд╛рдПрдВ рдЙрдирдХреЗ рд╕рдордХрдХреНрд╖ рд╣реИрдВ
  • рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рд▓рд┐рдП рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдЬреНрдЮрд╛рдд "рдлреНрд▓реЗрдХреНрд╕рдмрдЧреНрд╕" рдХреЛ рдареАрдХ рдХрд░реЗрдВ

... рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рд╕рдм PostCSS рдХреЗ рд╕рд╛рде рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ рдпрд╣ рдмрд╣реБрдд рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ рдХрд┐ PostCSS рдкреНрд▓рдЧрдЗрди рдСрд░реНрдбрд░ рдЕрдВрддрд┐рдо-рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рдирд┐рдпрдВрддреНрд░рдг рдореЗрдВ рд╣реЛред

рдореЗрд░рд╛ рд╕реБрдЭрд╛рд╡ рд╣реИ рдХрд┐ рдпрджрд┐ рдЖрдк рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рдЙрди рддреАрди рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХреЛ рд╕рдХреНрд╖рдо рдХрд░рдиреЗ рдЬрд╛ рд░рд╣реЗ рд╣реИрдВ, рддреЛ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ postcss.config.js рдлрд╝рд╛рдЗрд▓ рдкреНрд░рджрд╛рди рдХрд░рдХреЗ рдбрд┐рдлрд╝реЙрд▓реНрдЯ PostCSS рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреЛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдУрд╡рд░рд░рд╛рдЗрдб рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрджрд┐ рд╡реЗ рдЗрд╕ рдорд╛рд░реНрдЧ рдкрд░ рдЧрдП рдереЗ, рддреЛ рдЙрдиреНрд╣реЗрдВ рдЙрди рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛, рд▓реЗрдХрд┐рди рдореЗрд░реА рд░рд╛рдп рдореЗрдВ рдирд┐рдпрдВрддреНрд░рдг рдХрд╛ рд╕реНрддрд░ рдЖрд╡рд╢реНрдпрдХ рд╣реИред

TL; DR рдХреГрдкрдпрд╛ рд╕рд╛рд╡рдзрд╛рди рд░рд╣реЗрдВ рдХрд┐ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП PostCSS рдкрд░ рдкреВрд░реНрдг рдирд┐рдпрдВрддреНрд░рдг рд░рдЦрдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рди рдЯреВрдЯреЗ, рдореИрдВ рд╢рд╛рдмреНрджрд┐рдХ рд░реВрдк рд╕реЗ рдЗрд╕ рд╡рдЬрд╣ рд╕реЗ CRA рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдФрд░ рдЕрдЧрд░ рдореИрдВ рдЕрдм рдФрд░ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рдкрд╛рдКрдВрдЧрд╛ рддреЛ рдореБрдЭреЗ рдмрд╣реБрдд рджреБрдЦ рд╣реЛрдЧрд╛ред

@Adamwathan рдХреЛ рд╕реБрд░рдХреНрд╖рд┐рдд рдХрд░рдирд╛ - рдпрд╣рд╛рдВ рдФрд░ рдЕрдзрд┐рдХ рд╡рд┐рд╡рд░рдг рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ рдХрд┐ рдкреЛрд╕реНрдЯрд╕реНрдХреЙрдкреНрд╕ рд╡рд┐рдХрд▓реНрдк рдЕрдиреБрдХреВрд▓рди рдХреИрд╕реЗ рджрд┐рдЦреЗрдЧрд╛ред рдЕрдЧрд▓реЗ рдкреНрд▓рдЧрдЗрди рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкреЛрд╕реНрдЯрд╕реНрдХреЙрдиреНрд╕реН рдХреЙрдиреНрдлрд┐рдЧрд░ рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдиреЗ рдХреЗ рд╕рд╛рде-рд╕рд╛рде postcss.config.js рд╡рд┐рдХрд▓реНрдк рджреЗрдирд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛, рддрд╛рдХрд┐ рдХрдИ рдкреНрд░реЛрдЬреЗрдХреНрдЯреНрд╕ рдореЗрдВ рд╕рд╛рдЭрд╛ рдХрд┐рдП рдЧрдП рдХреЙрдиреНрдлрд┐рдЧрд░ рдХреЛ рдЖрд╕рд╛рдиреА рд╕реЗ рдПрдХ рдЕрддрд┐рд░рд┐рдХреНрдд рдлрд╝рд╛рдЗрд▓ рдХреЗ рдмрд┐рдирд╛ рдЗрдВрдЬреЗрдХреНрдЯ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХреЗред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕рднреА рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рддреЛрдВ рдХреЗ рд▓рд┐рдП рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЛ рд╕рдХреНрд╖рдо рдХрд░рдирд╛ рдмреЗрд╣рддрд░ рд╣реИ (рди рдХреЗрд╡рд▓ .module рдкреНрд░рддреНрдпрдп рдХреЗ рд▓рд┐рдП), рдФрд░ рд╣рдо рдЬрд┐рд╕реЗ рд╡реИрд╢реНрд╡рд┐рдХ рд╣реЛрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдЙрд╕реЗ .global рдкреНрд░рддреНрдпрдп рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреАред

рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ *.module.(css|scss) рдпреБрдХреНрддрд┐ рдареАрдХ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ create-react-app рд╕рд╛рде рд╕рдВрд░реЗрдЦрд┐рдд рдХрд░рддрд╛ рд╣реИ, рдЯрд╛рдЗрдкрд╕реНрдХреНрд░рд┐рдкреНрдЯ рдЯрд╛рдЗрдкрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ, рдФрд░ Next.js рдХреЗ рд▓рд┐рдП рдирдП рдЕрдиреНрдп рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдЖрд╕рд╛рди рдорд╛рдЗрдЧреНрд░реЗрд╢рди рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред

рдЯрд╛рдЗрдкрдкреНрд░рддрд┐ рдХреЗ рд╕рд╛рде, рдЖрдк рдЙрддреНрдкрдиреНрди рдХрд░рдХреЗ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ typings рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ *.d.ts рд╣рд░ рдХреЗ рд▓рд┐рдП typings *.(css|scss) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рдлрд╝рд╛рдЗрд▓ рдЯрд╛рдЗрдк рдХрд┐рдпрд╛-рд╕реАрдПрд╕рдПрд╕-рдореЙрдбреНрдпреВрд▓ рдФрд░ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рд▓рд┐рдЦрд╛ рдЧрдпрд╛-рдПрд╕рд╕реАрдПрд╕рдПрд╕-рдореЙрдбреНрдпреВрд▓ рд▓реЗрдХрд┐рди рдЖрдк рдРрд╕рд╛ рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдФрд░ рдЕрднреА рднреА рд╕реНрд╡рдд: рдкреВрд░реНрдгрддрд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рдЖрдк рдирд┐рдореНрди VS рдХреЛрдб рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules

@adamwathan рдмрд╛рдХреА рдиреЗ рдЖрд╢реНрд╡рд╕реНрдд рдХрд┐рдпрд╛ рдХрд┐ рд╣рдо PostCSS рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдВрдЧреЗ! рд╣рдореЗрдВ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ _exact_ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдЕрднреА рддрдХ рдХреИрд╕рд╛ рджрд┐рдЦреЗрдЧрд╛, рд▓реЗрдХрд┐рди рдпрд╣ рд╕реАрдПрд╕рдПрд╕ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдХреЗ рд╕рд╛рде рд╕реНрд╡рд╛рднрд╛рд╡рд┐рдХ рд░реВрдк рд╕реЗ рдЙрднрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдпрд╣ рднреА рдЦреВрдм рд░рд╣реА!! рдХреНрдпрд╛ рдЗрд╕рдХреЗ рд▓рд┐рдП рдХреЛрдИ рдЯрд╛рдЗрдорд▓рд╛рдЗрди рд╣реИ? рдХреНрдпрд╛ рдпрд╣ рдЗрд╕ рд╕рд╛рд▓ рд╣реЛ рд░рд╣рд╛ рд╣реИ?

@andreisoare рд╣рдо рдЗрд╕ RFC рдХреЗ рд╡реИрд╢реНрд╡рд┐рдХ рдЖрдзреЗ рдХрд╛ рд╡рд┐рд▓рдп рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рд╣реИрдВ: https://github.com/zeit/next.js/pull/8710

рд╣рдо рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рд╕рдорд░реНрдерди ASAP рдХреЗ рд▓рд┐рдП рдЬрд╛рд░реА рд░рд╣реЗрдЧрд╛!

@adamwathan @Timer рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдХреА рдЬрдбрд╝ рдореЗрдВ рдкрд░рдВрдкрд░рд╛рдЧрдд рдкреЛрд╕реНрдЯрд╕реНрдХреИрд╕рдХреЙрдиреНрдлрд╝рд┐рдЧред js рдлрд╝рд╛рдЗрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдЬрд╛рд░реА рд░рдЦ рд╕рдХрддрд╛ рд╣реИ, рддреЛ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛, рдХреНрдпреЛрдВрдХрд┐ рдЕрдм рд╣рдо next-sass рд╕рд╛рде рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рддреЛ рдЗрд╕ рдХреЛрд░ рдХреЛ рдЖрддреЗ рджреЗрдЦ рдЦреБрд╢реА рд╣реБрдИред

рдХреНрдпрд╛ AMP рдорд╣рддреНрд╡рдкреВрд░реНрдг рдкрде рдкреНрд░рддрд┐рдкрд╛рджрди рдЗрд╕ RFC рджреНрд╡рд╛рд░рд╛ рд╕рдорд░реНрдерд┐рдд рд╣реЛрдЧрд╛?

рд░рд┐рдХреЙрд░реНрдб рдХреЗ рд▓рд┐рдП, рдпрджрд┐ рдЖрдк рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХреЛ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдЖрдкрдХреЛ 1 рд╡рд┐рдЪрд╛рд░, рдПрдХ рдШрдЯрдХ рдореЗрдВ рд╕реАрдПрд╕рдПрд╕, рдПрдЪрдЯреАрдПрдордПрд▓ рдФрд░ рдЬреЗрдПрд╕ рдХреЛ рдПрдиреНрдХреИрдкреНрд╕реБрд▓реЗрдЯ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред рдпрджрд┐ рдЖрдкрдХреЛ рдпрд╣ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдорд╣рд╕реВрд╕ рдирд╣реАрдВ рд╣реБрдЖ рд╣реИ (рдпрд╣ рдЕрдЧрд▓реА рдХреЗ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдПрдХ рдиреЛрдЯ рд╣реИред рдЕрдиреБрд░рдХреНрд╖рдХ рдирд╣реАрдВ рд╣реИ) рддреЛ рдЗрд╕рд╕реЗ рдЖрдкрдХреЛ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдХреА рддрд░рд╣ рдкреВрд░реЗ CSS UI рдХрд┐рдЯ рдореЗрдВ рдирд╣реАрдВ рдЦрд░реАрджрдирд╛ рдкрдбрд╝реЗрдЧрд╛, рдЖрдк 1 рдШрдЯрдХ рдЖрдЬрд╝рдорд╛ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдпрджрд┐ рдпрд╣ рдирд╣реАрдВ рд╣реИ рддреЛ 'рдЕрдкрдиреА рдЖрд╡рд╢реНрдпрдХрддрд╛рдУрдВ рдХреЗ рдЕрдиреБрд░реВрдк рдирд╣реАрдВ рд╣реИ, рддреЛ рдЖрдк рдЙрд╕ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдирд┐рд░реНрднрд░рддрд╛ рдХреЗ рд╕рд╛рдорд╛рди рд╕реЗ рдирд┐рдкрдЯрдиреЗ рдХреЗ рдмреЛрдЭ рдХреЗ рдмрд┐рдирд╛ рдЯреЙрд╕ред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕ рдЬреНрдЮрд╛рди рдХреЛ рдлреИрд▓рд╛рдирд╛ рднреА рдмрд╣реБрдд рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЕрдХреНрд╕рд░ рдЧрд▓рдд рд╕рдордЭрд╛ рдЬрд╛рддрд╛ рд╣реИ рдпрд╛ рдмрд╛рдж рдореЗрдВ рд╕рдордЭрд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рдЕрдХреНрд╕рд░ рдпрд╣ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреЗ рдХрд╛рдо рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рдмрди рдЬрд╛рддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдЙрдЪрд┐рдд рдЕрдореВрд░реНрддрддрд╛ рдХреЗ рд╕рд╛рде, рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХрд╛рдлреА рдЖрд╕рд╛рди рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

рдФрд░ рд╕рд┐рд░реНрдл рдЗрд╕рд▓рд┐рдП рдХрд┐ "рдмрд╣реБрдд рд╕рд╛рд░реЗ рд▓реЛрдЧ" рдЕрдкрдиреЗ рд╕реАрдПрд╕рдПрд╕ рдХрд╛ рдЖрдпрд╛рдд рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдЗрд╕рдХрд╛ рдорддрд▓рдм рдпрд╣ рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдорд╣рд╛рди рд╡рд┐рдЪрд╛рд░ рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕рдмрд╕реЗ рд╢рдХреНрддрд┐рд╢рд╛рд▓реА рдЪреАрдЬреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рдпрд╣ рддрдереНрдп рд╣реИ рдХрд┐ рдпрд╣ рдЖрдкрдХреЗ рд▓рд┐рдП CSS, HTML рдФрд░ JS рдХреЛ рдПрдирдХреИрдкреНрд╕реБрд▓реЗрдЯ рдХрд░рддрд╛ рд╣реИред рдФрд░ рдпрджрд┐ рдЖрдк рд╕реАрдПрд╕рдПрд╕ рдХреЛ рд╕рд╛рдЗрдб-рд▓реЛрдб (рдЖрдпрд╛рдд) рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рдПрдХ рдкреНрд░рдХрд╛рд░ рдХрд╛ рд╕рд╛рдЗрдб-рд╕реНрдЯреЗрдк рд╣реИ рдЬреЛ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рджреЗрддрд╛ рд╣реИ, рдЖрдкрдХреЛ рд▓рд╛рдн рджреЗрддрд╛ рд╣реИред

рд░рд┐рдХреЙрд░реНрдб рдХреЗ рд▓рд┐рдП: CSS-in-CSS (рдпрд╛ HTML) рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рд▓рд┐рдП рдПрдХ рдмрд╣реБрдд рдЕрдзрд┐рдХ рдХреБрд╢рд▓ рдкрд░рд┐рд╡рд╣рди рдкрд░рдд рд╣реИ, рдФрд░ рдПрдХ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдЬреЗрдПрд╕ рдФрд░ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд╕рдореЗрдЯрдирд╛ рдПрдХ рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдореЗрдВ рдЙрдиреНрд╣реЗрдВ рдЧрд┐рд░рд╛рдиреЗ рд╕реЗ рдмреЗрд╣рддрд░ рдирд╣реАрдВ рд╣реИред
рдЗрд╕рд╕реЗ рднреА рдЕрдзрд┐рдХ - рдкрд┐рдЫрд▓реА рдкреАрдврд╝реА рдХреЗ рдЕрдзрд┐рдХрд╛рдВрд╢ рд╕реАрдПрд╕рдПрд╕-рдЗрди-рдЬреЗрдПрд╕ рдиреЗ рдкреНрд░рджрд░реНрд╢рди рдХреЗ рдЦрд╛рддрд┐рд░ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рд╕реАрдПрд╕рдПрд╕ рдХреЗ рдкреНрд░рджрд░реНрд╢рди рдХреЗ рд╕рдордп рдХреЗ рдирд┐рд░реНрдорд╛рдг рдХреЗ рд▓рд┐рдП рдирд┐рдХрд╛рд▓рд╛, рдЗрд╕ рдкреНрд░рдХрд╛рд░ рдПрдХ рд╕реНрдерд┐рд░ рд╕реАрдПрд╕рдПрд╕ рдХрд╛ рдЙрдЪрд┐рдд рдкреНрд░рдмрдВрдзрди рдХрд░рдирд╛ рдЖрд╡рд╢реНрдпрдХ рд╣реИред рд╣рд╛рд▓рд╛рдБрдХрд┐ - рдЕрдЧрд▓реА рдмрд╛рд░ рдЗрд╕ рддрд░рд╣ рдХреЗ рдЕрд░реНрдХ рдХрд╛ рд╕рдорд░реНрдерди рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, рдЗрд╕рдХрд╛ рдЕрднреА рдЦреБрд▓рд╛рд╕рд╛ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред

рд░рд┐рдХреЙрд░реНрдб рдХреЗ рд▓рд┐рдП: рдореБрд╕реНрдХрд╛рди :: рдПрд╕рдПрдПрд╕рдПрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛, рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдЬреИрд╕реЗ рдлреНрд░реЗрдорд╡рд░реНрдХ рдХреЗ рд╕рд╛рде рд▓реЗрд╕ рдЕрднреА рднреА рдПрдХ рдЪреАрдЬ рд╣реИ рдФрд░ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ! рдЬреЗрдПрд╕ рд╕реНрддрд░ рдкрд░ рдПрдирдХреИрдкреНрд╕реБрд▓реЗрд╢рди рдирд╣реАрдВ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдмреАрдИрдПрдо рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдПрдХ рд╡рд┐рдХрд▓реНрдк рд╣реИред рджреЛрдиреЛрдВ рддрд░рд╣ рд╕реЗ рд╕рд╣рдпреЛрдЧ рдЬрд░реВрд░реА рд╣реИред

@timer рдХреНрдпрд╛ рдЗрд╕рдХрд╛ рдкрд╣рд▓рд╛ рдЖрдзрд╛ рд╣рд┐рд╕реНрд╕рд╛ (https://github.com/zeit/next.js/pull/8710) рд╕реАрдПрд╕рдПрд╕ рдХрд╛ рдкрде рд╡рд┐рднрд╛рдЬрди рдЕрдм рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ? рдпрд╛ рдХрд┐ рдЕрднреА рднреА рдЖрдирд╛ рд╣реИ?

(рд╕рдВрдмрдВрдзрд┐рдд, https://github.com/zeit/next-plugins/issues/190)

рдЧреНрд▓реЛрдмрд▓ рд╕реАрдПрд╕рдПрд╕ рдкрде рд╡рд┐рднрд╛рдЬрди рдирд╣реАрдВ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдирд╣реАрдВред рдХреЗрд╡рд▓ CSS рдореЙрдбреНрдпреВрд▓ (рдШрдЯрдХ-рд╕реНрддрд░ рдкрд░ рдЖрдпрд╛рддрд┐рдд) рдкрде рд╡рд┐рднрд╛рдЬрди рд╣реЛрдЧрд╛ред ЁЯСН

рдХреНрдпрд╛ рдХреЛрдИ рд╕реНрдкрд╖реНрдЯреАрдХрд░рдг рд╣реИ рдХрд┐ рдпрд╣ # 9392 рдФрд░ # 9385 рдореБрджреНрджреЛрдВ рдХреЛ рдХреИрд╕реЗ рдкреНрд░рднрд╛рд╡рд┐рдд рдХрд░рддрд╛ рд╣реИ? рд╕рд┐рд░реНрдл рдпрд╣ рд╕рдордЭрдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐ рдкрд░реНрджреЗ рдХреЗ рдкреАрдЫреЗ рдХреНрдпрд╛ рд╣реЛ рд░рд╣рд╛ рд╣реИред рддрд╛рдХрд┐, рдореИрдВ рдЕрдкрдиреЗ рдХреЛрдбрдмреЗрд╕ рдкрд░ рдореБрджреНрджреЛрдВ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░ рд╕рдХреВрдВред

рдирдорд╕реНрддреЗред рд╣рдо рдЕрдкрдиреЗ рд░рд┐рдПрдХреНрдЯ рдРрдк рдХреЛ рдЕрдЧрд▓реЗ рдЯреВрд▓ рдореЗрдВ рдЕрдкрдЧреНрд░реЗрдб рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣реЗ рд╣реИрдВред

рд╣рд╛рд▓рд╛рдВрдХрд┐ рд╣рдорд╛рд░реЗ рд▓рд┐рдП рдпрд╣ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдХрдард┐рди рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рд╣рдордиреЗ CSS рдХреЗ рд▓рд┐рдП рдЕрдЧрд▓реЗ рдкреНрд▓рдЧрдЗрди рдХреЗ рд╕рд╛рде рдкреНрд░рдпрд╛рд╕ рдХрд┐рдпрд╛ рд▓реЗрдХрд┐рди # 9392 # 9385 рдФрд░ рдЕрдзрд┐рдХ рдЬреИрд╕реА рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЗ рд╕рд╛рде рдХрд╣рд░ рдмрд░рдкрд╛рдпрд╛ред

рдХреНрдпрд╛ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рд╕рдорд░реНрдерди (рдкреНрд░рд╛рдпреЛрдЧрд┐рдХ) рдХреЗ рд▓рд┐рдП рднреА рдХреЛрдИ рдИрдЯреАрдП рд╣реИ? рдЗрд╕рдХреЗ рд╡рд┐рдХрд╛рд╕ рдХреЛ рдЧрддрд┐ рджреЗрдиреЗ рдореЗрдВ рдорджрдж рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛?

рддреЛ рд╣рдо рдШрдЯрдХ рд╕реНрддрд░ рдкрд░ рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ?

рдЬрдм рддрдХ рд╕рдорд╕реНрдпрд╛ рдареАрдХ рдирд╣реАрдВ рд╣реЛрдЧреА, рддрдм рдЖрдкрдХреЛ рдмрд╕ рдПрдХ рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдЕрдЧрд▓реЗ-рд╕реАрдПрд╕рдПрд╕ рдореБрджреНрджреЗ рдкрд░ рдЖрдкрдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рдореВрд░реНрдЦрддрд╛рдкреВрд░реНрдг рдкреНрд░рд╢реНрди рдХреЗ рд▓рд┐рдП рдХреНрд╖рдорд╛ рдХрд░реЗрдВ: рдЬрд╣рд╛рдВ рддрдХ тАЛтАЛрд╡реИрд╢реНрд╡рд┐рдХ рд╕реАрдПрд╕рдПрд╕ рдЬрд╛рддрд╛ рд╣реИ, рдпрд╣ рд╕рд┐рд░реНрдл рд╕рд┐рд░ рдореЗрдВ рдПрдХ рд▓рд┐рдВрдХ рд╕рд╣рд┐рдд рдХреИрд╕реЗ рдЕрд▓рдЧ / рдмреЗрд╣рддрд░ рд╣реИ?

@otw рдпрджрд┐ рдЖрдк рд╡реИрд╢реНрд╡рд┐рдХ CSS рдЖрдпрд╛рдд рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдпрд╣ рдЖрдкрдХреЗ рдмрд╛рдХреА рдХреЛрдб рдХреЗ рд╕рд╛рде рдмрд┐рд▓реНрдб рдкрд╛рдЗрдкрд▓рд╛рдЗрди рд╕реЗ рдЧреБрдЬрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдиреНрдпреВрдирддрдо рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЖрджрд┐ред рдлрд┐рд░ рдмрд┐рд▓реНрдб рдФрд░ рдиреЗрдХреНрд╕реНрдЯ рдХрд╛ рдЖрдЙрдЯрдкреБрдЯ рдмрди рдЬрд╛рддрд╛ рд╣реИред js

рдЕрдЧрд░ рдпрд╣ рд▓рд╛рдн рд╣реИ рддреЛ рдЖрдк рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЬреНрдпрд╛рджрд╛рддрд░ рд▓реЛрдЧ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд▓рд┐рдП рдЖрдЧреЗ рджреЗрдЦ рд░рд╣реЗ рд╣реИрдВ рддрд╛рдХрд┐ рдПрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рд╕реАрдПрд╕рдПрд╕ рдХреЗрд╡рд▓ рддрднреА рд▓реЛрдб рд╣реЛ рдЬрдм рдШрдЯрдХ рд▓реЛрдб рд╣реЛред

рд╕рдВрджрд░реНрдн рдХреЗ рд▓рд┐рдП, рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреА рдПрдХ рдЯреАрдо рд╣реИ рдЬреЛ рдкрд┐рдЫрд▓реЗ рджреЛ рд╡рд░реНрд╖реЛрдВ рдореЗрдВ NextJS рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реА рд╣реИ рддрд╛рдХрд┐ рд╢реБрд░реБрдЖрддреА рдЪрд░рдг рдХреЗ рд╕реНрдЯрд╛рд░реНрдЯрдЕрдк рдХреЗ рд▓рд┐рдП рд▓рдЧрднрдЧ 40 рд╡реЗрдм рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХреЗред

рдореИрдВ рдЗрд╕ рдЕрд╡рд╕рд░ рдХреЛ рд░реЗрдЦрд╛рдВрдХрд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рд╣рдо рд╡рд░реНрддрдорд╛рди рдЬрд░реВрд░рддреЛрдВ, рджрд░реНрдж рдмрд┐рдВрджреБрдУрдВ, рд╣рдорд╛рд░реЗ рд╕рд╛рдордиреЗ рдЖрдиреЗ рд╡рд╛рд▓реЗ рдХреБрдЫ рдЖрд╡рд╢реНрдпрдХ npms рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЪреЗрддрд╛рд╡рдиреА, рдФрд░ рдкреНрд░рд╕реНрддрд╛рд╡рд┐рдд рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдХреЗ рд╕рд╛рде рдХреБрдЫ рдЪрд┐рдВрддрд╛ рджрд┐рдЦрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЕрдкрдиреЗ рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдХреЛ рдХреИрд╕реЗ рд╕реНрдЯрд╛рдЗрд▓ рдХрд░рддреЗ рд╣реИрдВред

рд╡рд░реНрддрдорд╛рди рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди

  • рд╣рдо рдПрдХ "рд╕реНрдЯрд╛рд░реНрдЯрд░ рдХрд┐рдЯ" рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рдмрдирд╛рдП рд░рдЦрддреЗ рд╣реИрдВ, рдЬрд┐рд╕рдореЗрдВ рд╣рдорд╛рд░реА рдХреЛрд░ рдРрдк рдХреА рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдкреВрд░реНрд╡-рдирд┐рд░реНрдорд┐рдд рд╣реИред рдЗрд╕реЗ рдПрдХ рдкреНрд░рд╛рд░рдВрднрд┐рдХ рдмрд┐рдВрджреБ рдХреЗ рд░реВрдк рдореЗрдВ рдХреНрд▓реЛрди рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдЗрд╕рдореЗрдВ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╕реЗ рдмрд╣реБрдд рдЕрдзрд┐рдХ рд╡рд┐рд╕реНрддрд╛рд░рд┐рдд рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рд╣реЛрддреА рд╣реИред
  • рд╣рдо рдЕрдкрдиреЗ рдбрд┐рдЬрд╛рдЗрди рд╕рд┐рд╕реНрдЯрдо рдХреЗ рдЖрдзрд╛рд░ рдХреЗ рд░реВрдк рдореЗрдВ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдФрд░ рд░рд┐рдПрдХреНрдЯрд╕реНрдЯреНрд░реИрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред рдХреНрдпреЛрдВрдХрд┐ рд╣рдо рдПрдХ рд╕реБрд╕рдВрдЧрдд рдбрд┐рдЬрд╛рдЗрди рдкреНрд░рдгрд╛рд▓реА рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдЬреЛ рд╣рдо рдбрд┐рдЬрд╛рдЗрди рд╕рд┐рд╕реНрдЯрдо рдХреЛ рд╡рд┐рд╕реНрддрд╛рд░ рджреЗрдиреЗ рдФрд░ рдЕрддрд┐рд░рд┐рдХреНрдд рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рд╡рд┐рдХрд▓реНрдкреЛрдВ, рдорд┐рд╢реНрд░рдгреЛрдВ, рдХрд╛рд░реНрдпреЛрдВ рдЖрджрд┐ рдХреЗ рд░реВрдк рдореЗрдВ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдкрд░рд┐рд╡рд░реНрдзрди рдХреЛ рд╢рд╛рдорд┐рд▓ рдХрд░рдиреЗ рдХреЗ http://prntscr.com/qc8r0g
  • рд╣рдорд╛рд░реА рдЕрдзрд┐рдХрд╛рдВрд╢ рдкрд░рд┐рдпреЛрдЬрдирд╛рдУрдВ рдХреЗ рд▓рд┐рдП рд╣рдо рдЕрдкрдиреЗ рд╡рд┐рд╕реНрддрд╛рд░рд┐рдд рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рд╕реЗрдЯрдЕрдк рджреНрд╡рд╛рд░рд╛ рдкреНрд░рджрд╛рди рдХреА рдЧрдИ рдЙрдкрдпреЛрдЧрд┐рддрд╛ рд╡рд░реНрдЧреЛрдВ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕реНрдЯрд╛рдЗрд▓ рдХрд░рдХреЗ рдкреНрд░рд╛рдкреНрдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдЕрдкрд╡рд╛рдж рд╣реИрдВред рдЙрди рдЕрдкрд╡рд╛рджреЛрдВ рдХреЗ рд▓рд┐рдП, рд╣рдо рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдХреЗ рд╕рд╛рде рдПрд╕рдПрдПрд╕ рдкреНрд▓рдЧрдЗрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред SASS рдкреНрд▓рдЧрдЗрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ рд╣рдо рдЕрдкрдиреЗ рдЧреНрд▓реЛрдмрд▓реНрд╕ рд╕реЗ рд╣рдорд╛рд░реЗ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рд╡реИрд░рд┐рдПрдмрд▓, рдлрд╝рдВрдХреНрд╢рдВрд╕ рдФрд░ рдорд┐рдХреНрд╕рд┐рдВрд╕ рдХреЛ рдЖрдпрд╛рдд рдХрд░рддреЗ рд╣реИрдВ рддрд╛рдХрд┐ рдбрд┐рдЬрд╝рд╛рдЗрди рд╕рд┐рд╕реНрдЯрдо рдХреЛ рдПрдХрдЬреБрдЯ рд░рдЦрд╛ рдЬрд╛ рд╕рдХреЗред рд╣рдордиреЗ рдПрдХ рд╡рд┐рд╢реЗрд╖ рдЖрдпрд╛рдд рдХрд┐рдпрд╛ рдЬрд┐рд╕реЗ "рдЬреЗрдПрдХреНрд╕-рд╣реЗрд▓реНрдкрд░" рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ рдЬреЛ рдХрд┐ рд╣рдорд╛рд░реЗ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрдХреНрд╕ рдореЗрдВ рд▓рд╛рддрд╛ рд╣реИред рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ: http://prntscr.com/qc8xbr
  • рдХреБрдЫ рд▓реЗрдЖрдЙрдЯ рдШрдЯрдХреЛрдВ рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ рдЬреЛ HTML, рдмреЙрдбреА рдФрд░ рд░реВрдЯ рдбрд┐рд╡ рдЯреИрдЧреНрд╕ рдХреЛ рдЫреВрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рдХреБрдЫ рдкреНрд▓рдЧрдЗрдиреНрд╕ рдЬреЛ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдорд╛рд░реНрдХрдЕрдк, рдпрд╛ npms рдЙрддреНрдкрдиреНрди рдХрд░рддреЗ рд╣реИрдВ, рдЬреЛ рдкреЛрд░реНрдЯрд▓реНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдорд╛рд░реНрдХрдЕрдк рдХреЛ рдЫреВрдиреЗ рдХреЗ рд▓рд┐рдП рд╕реАрдПрд╕рдПрд╕ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рдЬрд┐рд╕ рдШрдЯрдХ рд╕реЗ рд╣рдо рд╡реИрд╢реНрд╡рд┐рдХ рд╡рд┐рдХрд▓реНрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред -jsxред рдпрд╣ рдПрдХ рдЕрдВрддрд┐рдо рдЙрдкрд╛рдп рд╣реИ рд▓реЗрдХрд┐рди рд╣рдорд╛рд░реЗ рд▓реЗрдЖрдЙрдЯ рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рд╣реИ рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рдпрд╣рд╛рдВ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ: http://prntscr.com/qc8yo6

рд╡рд░реНрддрдорд╛рди рдХрдорд┐рдпрд╛рдВ / рдореБрджреНрджреЗ

  • рд╣рдо рдЕрдкрдиреЗ рдШрдЯрдХреЛрдВ рдХреЗ рд╕рд╛рде рдЗрдВрдЬреЗрдХреНрдЯ рдХрд┐рдП рдЧрдП SASS рдХреЛрдб (IDE рдореБрджреНрджреЛрдВ рдФрд░ рдЗрдВрдЬреЗрдХреНрд╢рди рднрд╛рд╖рд╛рдУрдВ рдХреЗ рд╕рдорд░реНрдерди рдХреА рдХрдореА) рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░реЗрдВрдЧреЗ, рд▓реЗрдХрд┐рди рдЙрджрд╛рд╣рд░рдг рддрдм рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рдЬрдм рдЖрд╡рд╢реНрдпрдХ рдЬреНрдЮрд╛рдд рдмрдЧ рдХреЗ рдХрд╛рд░рдг рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдЪрд░ рдЖрдпрд╛рдд рджреГрдврд╝рддрд╛ рд╕реЗ рдпрд╣ рдХрд┐ рдпрд╣ NextJS рджреНрд╡рд╛рд░рд╛ рдкреНрд░рд╕реНрддрд╛рд╡рд┐рдд рдХрд┐рд╕реА рднреА рдЯреВрд▓-рдЪреЗрди рдореЗрдВ рди рд╣реЛред
  • рд╣рдорд╛рд░реЗ рд╕реНрдЯрд╛рдЗрд▓ рд╡рд╛рд▓реЗ jsx SASS рдореЗрдВ рдЖрдпрд╛рдд рдХрд┐рдП рдЧрдП рд╣рдорд╛рд░реЗ рд╡реИрд╢реНрд╡рд┐рдХ SCSS рдЪрд░реЛрдВ рдХрд╛ рдкрддрд╛ рдирд╣реАрдВ рд▓рдЧрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИред рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреБрдЫ рдкреНрд░рдХрд╛рд░ рдХреЗ рд╡реИрд╢реНрд╡рд┐рдХ рдПрдирдкреАрдПрдо рдореЙрдбреНрдпреВрд▓ рдХреИрд╢ рд╣реИрдВ рдЬреЛ рд╣рдо рд╕реНрдкрд╖реНрдЯ рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рд╡реЗрдмрдкреИрдХ рд╣рдорд╛рд░реЗ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рд╡реИрд╢реНрд╡рд┐рдХ рдЪрд░ рд╕реЗ рдлреИрд▓рдиреЗ рд╡рд╛рд▓реЗ рдЧрд░реНрдо рдкреБрдирдГ рд▓реЛрдб рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реИред рдкреВрд░реЗ $ # $ 1 $ # $ $ npm ci рдПрдХ рдПрдХ node_modules FреНтАНрддреНрдпрд╣рд╛рд░реНрд╕, рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХреИрд╢ рд╕рд╛рдлрд╝ рдХрд░рдирд╛, рдХреИрд╢ рдХреНрд▓рд┐рдпрд░ рдлрд╝реЛрд░реНрд╕ рдХрдВрд╕реЛрд▓ рдХрдорд╛рдВрдб рд╕рднреА рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣рд╛рдБ рдХрд╛рдо рдХреЗ рд░реВрдк рдореЗрдВ рдХреБрдЫ рдЧреНрд▓реЛрдмрд▓ npm рдХреИрд╢ рд╣реИред рдЗрд╕рд▓рд┐рдП рд╣рдо рдмрд╣реБрдд рдЪрд╛рд╣реЗрдВрдЧреЗ рдХрд┐ рдШрдЯрдХреЛрдВ рдкрд░ рд▓рд╛рдЧреВ CSS / SASS рдореЙрдбреНрдпреВрд▓ рдореЗрдВ рдЖрдпрд╛рдд рдХреА рдЧрдИ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд░рддреЗ рд╕рдордп рдареАрдХ рд╕реЗ рд▓реЛрдб рдХрд░рдирд╛ рдареАрдХ рд╣реЛред рд╕рдВрдХреНрд╖реЗрдк рдореЗрдВ, рдШрдЯрдХреЛрдВ рджреНрд╡рд╛рд░рд╛ рдХрд┐рдП рдЧрдП рдХрд┐рд╕реА рднреА рдПрд╕рдПрдПрд╕ рдкреНрд░рд╕рдВрд╕реНрдХрд░рдг рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдФрд░ рдЧрд░реНрдо рдкреБрдирдГ рд▓реЛрдбрд┐рдВрдЧ рдХреЛ рдмрдирд╛рдП рд░рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдХреЛ рджреЗрдЦрдирд╛ рдЪрд╛рд╣рд┐рдПред рдЗрд╕реЗ рдкрд┐рдЫрд▓реА рдмреБрд▓реЗрдЯ рдореЗрдВ рдиреЛрдЯ рдХрд┐рдП рдЧрдП рд╡реЗрдмрдкреИрдХ рд▓реЛрдбрд░ рд╡рд┐рдХрд▓реНрдк рджреНрд╡рд╛рд░рд╛ рд╣рд▓ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реЛрдЧрд╛ред
  • рд╣рдореЗрдВ рдЕрдкрдиреЗ рдкреЛрд╕реНрдЯрд╕реАрдПрд╕ рдХреЙрдиреНрдлрд┐рдЧ рдХреЛ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдЬрдЧрд╣реЛрдВ рдкрд░ рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рдорд╛рдзрд╛рди рдХреЗ рд╕рд╛рде рдЖрдирд╛ рдерд╛ рдХреНрдпреЛрдВрдХрд┐ рд╡реИрд╢реНрд╡рд┐рдХ рдПрд╕рдПрдПрд╕ рдФрд░ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдбрдПрдХреНрд╕ рдХреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдмрдирд╛рдпрд╛ рдЧрдпрд╛ рд╣реИред

рдкреНрд░рд╕реНрддрд╛рд╡рд┐рдд рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдХреЗ рд╕рд╛рде рдЪрд┐рдВрддрд╛

рд╣рдо рдШрдЯрдХ CSS / SASS рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕рд╛рде рд╡реИрд╢реНрд╡рд┐рдХ рд╡рд┐рдХрд▓реНрдк рдХреЛ рдЕрд╡рд░реБрджреНрдз рдХрд░рдиреЗ рдХреЗ рд╡рд┐рдЪрд╛рд░ рд╕реЗ рд╣рд▓реНрдХреЗ рдврдВрдЧ рд╕реЗ рдЪрд┐рдВрддрд┐рдд рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдХреБрдЫ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ рд╣реИрдВ рдЬреЛ рдШрдЯрдХ рдХреЗ рдЖрдзрд╛рд░ рдкрд░, HTML, рд╢рд░реАрд░ рдФрд░ рд░реВрдЯ рдбрд┐рд╡ рдЯреИрдЧ рдХреЗ рд╕рд╛рде-рд╕рд╛рде рдЬрдирд░реЗрдЯ рдХрд┐рдП рдЧрдП HTML рдХреЗ рдорд╛рдорд▓реЛрдВ рдХреЛ рд╕реНрдкрд░реНрд╢ рдХрд░рддреЗ рд╣реИрдВред рдпрд╣ рдЖрд╡рд╢реНрдпрдХ рдирд╣реАрдВ рд╣реИ рдХрд┐ рдкреЛрд░реНрдЯрд▓реНрд╕ рдЖрджрд┐ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкреНрд▓реЗрд╕рдореЗрдВрдЯ рдХреЗ рдХрд╛рд░рдг рдЙрдХреНрдд рдШрдЯрдХ рдХреЗ рдЕрдВрджрд░ рдореМрдЬреВрдж рд╣реИред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдо рдЗрд╕рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рд╡реИрд╢реНрд╡рд┐рдХ рдПрд╕рдПрдПрд╕ рдФрд░ рдХреБрдЫ рдкреБрдирд░реНрдЧрдарди рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЗрд╕рд▓рд┐рдП рд╣рдо рдирд┐рд░реНрднрд░ рдирд╣реАрдВ рд╣реИрдВ рдХрд┐ рдХреМрди рд╕рд╛ рдШрдЯрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╡реИрд╢реНрд╡рд┐рдХ рд╕реАрдПрд╕рдПрд╕ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд▓реЛрдб рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред

рд╣рдо PostCSS рдкрд░ рдкреВрд░реНрдг рдирд┐рдпрдВрддреНрд░рдг рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕рдХреЗ рдмрдЬрд╛рдп рдХрд┐рд╕реА рд╡рд┐рд╢реЗрд╖ рдЪреВрдХ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдордЬрдмреВрд░ рд╣реЛрдиреЗ рд╕реЗ рдирд╣реАрдВ рдирд┐рдкрдЯрдирд╛ рд╣реЛрдЧрд╛ред

рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рдпрд╣ рдПрдХ рд▓рдВрдмрд╛ рдЙрддреНрддрд░ рдерд╛ рд▓реЗрдХрд┐рди рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рд▓рд╛рдпрдХ рдХреБрдЫ рдЕрдВрддрд░реНрджреГрд╖реНрдЯрд┐ рдереАред рдмреЗрдЭрд┐рдЭрдХ рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рдЖрдкрдХреЗ рдкрд╛рд╕ рдХреЛрдИ рдкреНрд░рд╢реНрди рд╣реИ рдФрд░ рд╣рдо рдЖрдЧреЗ рджреЗрдЦрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдХрд┐ рдиреЗрдХреНрд╕реНрдЯрдЬреЗрдПрд╕ рдЯреАрдореЗрдВ рдЕрдЧрд▓реЗ (рджрдВрдбрд┐рдд рдЙрджреНрджреЗрд╢реНрдп) рдХреЗ рд╕рд╛рде рдХреНрдпрд╛ рдХрд░рддреА рд╣реИрдВ!

@ рд╕рд╕реНрд╡рд╕реЗрд▓ ,

рд╣рдо рдШрдЯрдХ CSS / SASS рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕рд╛рде рд╡реИрд╢реНрд╡рд┐рдХ рд╡рд┐рдХрд▓реНрдк рдХреЛ рдЕрд╡рд░реБрджреНрдз рдХрд░рдиреЗ рдХреЗ рд╡рд┐рдЪрд╛рд░ рд╕реЗ рд╣рд▓реНрдХреЗ рд╕реЗ рдЪрд┐рдВрддрд┐рдд рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдХреБрдЫ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ рд╣реИрдВ рдЬреЛ рдШрдЯрдХ рдХреЗ рдЖрдзрд╛рд░ рдкрд░, HTML, рд╢рд░реАрд░ рдФрд░ рд░реВрдЯ рдбрд┐рд╡ рдЯреИрдЧ рдХреЗ рд╕рд╛рде-рд╕рд╛рде рдЬрдирд░реЗрдЯ рдХрд┐рдП рдЧрдП HTML рдХреЗ рдорд╛рдорд▓реЛрдВ рдХреЛ рд╕реНрдкрд░реНрд╢ рдХрд░рддреЗ рд╣реИрдВред рдпрд╣ рдЖрд╡рд╢реНрдпрдХ рдирд╣реАрдВ рд╣реИ рдХрд┐ рдШрдЯрдХ рдХреЗ рдЕрдВрджрд░ рдореМрдЬреВрдж рд╣реИ

рдЕрдЧрд░ рдореИрдВрдиреЗ рдЖрдкрдХреЛ рд╕рд╣реА рддрд░реАрдХреЗ рд╕реЗ рд╕рдордЭрд╛, рддреЛ рдЖрдкрдХреЛ рдЕрднреА рднреА рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдореЗрдВ :global рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред

@ Daniellt1

рдЕрдЧрд░ рдореИрдВрдиреЗ рдЖрдкрдХреЛ рд╕рд╣реА рддрд░реАрдХреЗ рд╕реЗ рд╕рдордЭрд╛, рддреЛ рдЖрдкрдХреЛ рдЕрднреА рднреА рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдореЗрдВ :global рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред

рдКрдкрд░ рдЙрдирдХреЗ рдиреЛрдЯ рджреЗрдЦреЗрдВ

рд╕реНрдерд╛рдиреАрдп рд╢реНрд░реЗрдгреА рдХреЗ рдирд╛рдо рдХреЗ рд╕рд╛рде рд╕рдВрдпреЛрдЬрд┐рдд рд╣реЛрдиреЗ рдкрд░ CSS рдореЙрдбреНрдпреВрд▓ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рддрд╛ рд╣реИ

рд╣рдорд╛рд░реЗ рд▓реЗрдЖрдЙрдЯ рдШрдЯрдХ рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рд╣рдо рд╕реНрдерд╛рдиреАрдп рд╡рд░реНрдЧ рдХреЗ рдирд╛рдо рдХреЗ рдмрд┐рдирд╛ <html> , <body> рдФрд░ рд░реВрдЯ div рдХреЛ рд▓рдХреНрд╖рд┐рдд рдХрд░ рд░рд╣реЗ рд╣реИрдВред

рдЗрд╕ рд╡рд┐рд╖рдп рдкрд░ рдПрдХ рд╡реАрдбрд┐рдпреЛ рдореЗрдВ рдпрд╣ рднреА рдЙрд▓реНрд▓реЗрдЦ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ рдХрд┐ рд╡реЗ :global рд╡рд┐рдХрд▓реНрдк рдХреЛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЕрд╡рд░реБрджреНрдз рдХрд░рдиреЗ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рдЬреЛ рдХрд┐ рдмрдбрд╝реА рд╕рдВрдЦреНрдпрд╛ рдореЗрдВ npms рдФрд░ CMS API рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рдорддрд▓рдм рдирд╣реАрдВ рд╣реИ рдЬреЛ рдорд╛рд░реНрдХрдЕрдк рдЙрддреНрдкрдиреНрди рдХрд░рддреЗ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдЫреБрдЖ рдирд╣реАрдВ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ css рдореЙрдбреНрдпреВрд▓ рдХреЛ рд╕реНрдХреВрдк рдХрд░рдХреЗред

рдЕрд░реЗ @Soundvessel - рдпрд╣ рдореЗрд░рд╛ рд╡реАрдбрд┐рдпреЛ рд╣реИ рдЬрд┐рд╕реЗ рдореИрдВрдиреЗ рдЕрдкрдиреА рдЯреАрдо рдХреЗ рд▓рд┐рдП рдЖрдВрддрд░рд┐рдХ рд░реВрдк рд╕реЗ рд░рд┐рдХреЙрд░реНрдб рдХрд┐рдпрд╛ рд╣реИ (рдЖрдк рдЗрд╕ рддрдХ рдХреИрд╕реЗ рдкрд╣реБрдВрдЪреЗ?); рдкреНрд░рд╛рд░рдВрднрд┐рдХ рдкреНрд░рдпреЛрдЧрд╛рддреНрдордХ рдЪрд░рдгреЛрдВ рдХреЗ рджреМрд░рд╛рдиред рдЗрд╕ рд╡рд┐рд╖рдп рдкрд░ рдЖрд░рдПрдлрд╕реА рдХреЛ рдХреИрдирди рдорд╛рдиреЗрдВ be

рдореИрдВ рдЖрдкрдХреЛ рдПрдХ рд╕рдорд╛рдзрд╛рди рдХрд╛ рдкреНрд░рд╕реНрддрд╛рд╡ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж рджреЗрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдЬреЛ рд╕реАрдПрд╕рдПрд╕ рд╕рдорд╛рдзрд╛рди рдореЗрдВ рдПрдХ рд╕рдЬрд╛рдпрд╛рдлреНрддрд╛ рдЬреЗрдПрд╕ рдХреЗ рдмрдЬрд╛рдп рд╕реАрдПрд╕рдПрд╕ / рдПрд╕рдПрдПрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ рдЬрд┐рд╕рдХреЗ рд▓рд┐рдП рдЕрддрд┐рд░рд┐рдХреНрдд рд╕рд┐рдВрдЯреИрдХреНрд╕ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ рдЬреИрд╕реЗ рдХрд┐ рдХреИрдореЗрд▓рдХреЗрдб рдЧреБрдг рдЗрддреНрдпрд╛рджрд┐ред рд╣рдореЗрдВ рдФрд░ рдЕрдзрд┐рдХ рдбрд┐рдЬрд╝рд╛рдЗрди-рдХреЗрдВрджреНрд░рд┐рдд рд╣реЛрдиреЗ рд╕реЗ рдмрд╣реБрдд рдХреБрдЫ рдорд┐рд▓рддрд╛ рд╣реИред рдкреГрд╖реНрдарднреВрдорд┐, HTML / CSS рдХреЗ рд╕рд╛рде рд╕реАрдзреЗ рдХрд╛рдо рдХрд░рдиреЗ рдХрд╛ рд╡рд░реНрд╖реЛрдВ рдХрд╛ рдЕрдиреБрднрд╡, рдФрд░ рдЗрд╕рд╕реЗ рд╣рдореЗрдВ рдпрд╣ рдкрддрд╛ рд▓рдЧрд╛рдиреЗ рдореЗрдВ рдЖрд╕рд╛рдиреА рд╣реЛрддреА рд╣реИ рдХрд┐ рд╣рдо рдХреЛрдб рдореЗрдВ рдЬреЛ рдХреБрдЫ рджреЗрдЦ рд░рд╣реЗ рд╣реИрдВ рдЙрд╕реЗ рд╕реНрдХреНрд░реАрди рдкрд░ рдбрд┐рдмрдЧрд┐рдВрдЧ рдореЗрдВ рдмрд╣реБрдд рдЧрд╣рд░рд╛рдИ рд╕реЗ рджреЗрдЦрдирд╛ рдирд╣реАрдВ рд╣реИред

рдмрд╕ рдЬреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рдЬрдм рддрдХ рдХрд┐ рдореИрдВрдиреЗ рдКрдкрд░ рдХреБрдЫ рдЙрд▓реНрд▓реЗрдЦ рди рдХрд┐рдпрд╛ рд╣реЛ, рдХрд┐ рд╕рд╛рд╕ рдХрд╛ рдСрдЯреЛ-рдбрд┐рдЯреЗрдХреНрд╢рди / рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЕрдЪреНрдЫрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рд╕рд╛рд╕ рдПрдкреАрдЖрдИ рд╡рд┐рдХрд▓реНрдкреЛрдВ рдХреЛ рдХрд╣реАрдВ рдФрд░ рдЙрдЬрд╛рдЧрд░ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ: [email protected] рдиреЗ рдПрдХ рдЕрдЪреНрдЫрд╛ рдкреИрдЯрд░реНрди рд╕реНрдерд╛рдкрд┐рдд рдХрд┐рдпрд╛ рд╣реИ рдЬрд┐рд╕рдореЗрдВ рдЕрдиреБрдорддрд┐ рджреЗрдирд╛ рднреА рд╢рд╛рдорд┐рд▓ рд╣реИред рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ рдЪреБрдирдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рд╕ sass рдЗрдВрдЬрди рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдирд╛ рд╣реИ; рдЙрдирдХреЗ рд╡рд┐рдХрд▓реНрдк 1: 1 рд╕реЗ рдЕрдзрд┐рдХ рд╣реЛ рд╕рдХрддреЗ рд╣реИрдВ ...

рдореИрдВ рдпрд╣ рдкреНрд░рд╕реНрддрд╛рд╡рд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рдХрд┐ CSS рдореЙрдбреНрдпреВрд▓ рдХреЗ рд▓рд┐рдП рд╡рд┐рд╕реНрддрд╛рд░ рд╡рд┐рдиреНрдпрд╛рд╕ рдпреЛрдЧреНрдп рд╣реЛред
рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ .module.css рдЕрд▓рд╛рд╡рд╛ рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рд░рдгреА рдХреЛ рдЙрдЬрд╛рдЧрд░ рдХрд░реЗрдВ?
.module.css рдлрд╝рд╛рдЗрд▓ рдмрдирд╛рдирд╛ рдФрд░ рдЗрд╕реЗ import "Component.module.css" рдЖрдпрд╛рдд рдХрд░рдирд╛ рдЬрдм рдЖрдкрдХреЗ рдкрд╛рд╕ рдХреБрдЫ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреЗ рдХрдИ рдШрдЯрдХ рд╣реЛрддреЗ рд╣реИрдВ, рддреЛ рд╣рдореЗрдВ рдереЛрдбрд╝рд╛ рдлреВрд▓рд╛ рд╣реБрдЖ рд▓рдЧрддрд╛ рд╣реИред

рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВ рдореИрдВ рд╡рд┐рд╕реНрддрд╛рд░ рдХреЗ рд╕рд╛рде рдПрдХ рдлрд╝рд╛рдЗрд▓ рдмрдирд╛рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ: .m.css , Component.m.css рдХрд╣рдирд╛ рд╣реИ рдФрд░ рдЗрд╕реЗ import "Component.m.css" рд░реВрдк рдореЗрдВ рдЖрдпрд╛рдд рдХрд░рдирд╛

рдЬрдм рддрдХ Next.js рдЯреАрдо рдХрд╛ рдХрд╣рдирд╛ рд╣реИ рдХрд┐ рдХреБрдЫ рддрдХрдиреАрдХреА рдХрдард┐рдирд╛рдЗрдпрд╛рдБ рд╣реИрдВ рдЬреЛ рдЗрд╕реЗ рд╣реЛрдиреЗ рд╕реЗ рд░реЛрдХрддреА рд╣реИрдВред

рдореБрдЭреЗ рдирд╣реАрдВ рд▓рдЧрддрд╛ рдХрд┐ рдирд╛рдордХрд░рдг рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХреЗ рд▓рд┐рдП рдХреЛрдИ рднреА рд╡рд┐рдиреНрдпрд╛рд╕ рдЦреЛрд▓рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдЕрдирд╛рд╡рд╢реНрдпрдХ рдкрджрдЪрд┐рд╣реНрди рд╡реГрджреНрдзрд┐ рдХреА рддрд░рд╣ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореИрдВ .module.css рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХреЗ рд▓рд┐рдП _need_ рдкрд░ рд╕рд╡рд╛рд▓ рдХрд░рддрд╛ рд╣реВрдВ рдпрджрд┐ рдпрд╣ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реЛрдЧрд╛:

Next.js рдЖрдкрдХреЛ рдХреЗрд╡рд▓ рдПрдХ рдХрд╕реНрдЯрдо рдкреЗрдЬ / _app.js рдХреЗ рднреАрддрд░ Global CSS рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдЧрд╛ред

рдореИрдВрдиреЗ рд╢реБрд░реВ рдореЗрдВ рд╕реЛрдЪрд╛ рдерд╛ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд░реВрдк рдореЗрдВ рдкрд╛рд░реНрд╕ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдХреНрдпрд╛ рдирд╣реАрдВ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП, рдпрд╣ рдкрддрд╛ рд▓рдЧрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдмрд┐рд▓реНрдб рдХреЗ рд▓рд┐рдП .module.css рдЖрд╡рд╢реНрдпрдХ рд╣реЛрдЧрд╛, рд▓реЗрдХрд┐рди рдЕрдЧрд░ _app.js рдмрд╛рд╣рд░ рдХрд┐рд╕реА рднреА рдШрдЯрдХ / рдкреГрд╖реНрда рдореЗрдВ рдЧреИрд░-рдореЙрдбреНрдпреВрд▓ рдХрд╛ рдЖрдпрд╛рдд рдХрд┐рдпрд╛ рдЬрд╛рдПред рддрдм рддреНрд░реБрдЯрд┐ рд╣реЛ рдЬрд╛рдПрдЧреА рдФрд░ рдирд┐рд░реНрдорд╛рдг рд╕рдорд╛рдкреНрдд рд╣реЛ рдЬрд╛рдПрдЧрд╛, рддрдм рдирд╛рдордХрд░рдг рд╕рдореНрдореЗрд▓рди рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ _app.js рдмрд╛рд╣рд░ рдЖрдпрд╛рддрд┐рдд рдХреБрдЫ рднреА рдкреНрд░рдХреГрддрд┐ рдХреЗ рд▓рд┐рдП рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдирд╣реАрдВ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред

рдХреНрдпрд╛ рдпрд╣ рдЖрд╡рд╢реНрдпрдХрддрд╛ рдХреЗ рдмрдЬрд╛рдп рд╡рд┐рд╢реБрджреНрдз рд░реВрдк рд╕реЗ рд╕рдореНрдореЗрд▓рди рдХреЗ рд░реВрдк рдореЗрдВ рдордЬрдмреВрд░ рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ?

module.css рдХрдиреНрд╡реЗрдВрд╢рди рдХреА рдкрд╕рдВрдж https://github.com/css-modules/css-modules рджреНрд╡рд╛рд░рд╛ рдкрд╣рд▓реЗ рд╕реЗ рд╕реНрдерд╛рдкрд┐рдд рдХреЙрдиреНрд╡реЗрдВрдЯ рд╕реЗ рдЯрдХрд░рд╛рддреА рд╣реИ
рдпрд╣рд╛рдБ рдЙрджрд╛рд╣рд░рдг:
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
рдФрд░ рдпрд╣рд╛рдБ:
https://www.gatsbyjs.org/docs/css-modules/

рд╣рд╛рдВ, рд╢рд╛рдпрдж рд╡рд┐рд╕реНрддрд╛рд░ рдХреЛ рд╡рд┐рдиреНрдпрд╛рд╕ рдпреЛрдЧреНрдп рдмрдирд╛рдиреЗ рд╕реЗ рдпрд╣ рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╕реЗ рдЕрдзрд┐рдХ рдЬрдЯрд┐рд▓ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдХрдо рд╕реЗ рдХрдо рдЖрдк рдПрдХ рдирд┐рд░рдВрддрд░ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ .module.css рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕реЗ рдмрдВрджрд░ рдкреИрдЪрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдХрдИ рд╕реНрдерд╛рдиреЛрдВ рдкрд░ рд╣рд╛рд░реНрдб-рдХреЛрдб рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ

@bySabi

рдЗрд╕ рдкреНрд░рд╕реНрддрд╛рд╡рд┐рдд рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдФрд░ create-react-app рдмреАрдЪ рдХрд╛ рдЕрдВрддрд░ рдпрд╣ рд╣реИ рдХрд┐ " another-stylesheet.css рд╕рд╛рде рдЬреБрдбрд╝реЗ рдЙрджрд╛рд╣рд░рдг рдХреА рддрд░рд╣" рдирд┐рдпрдорд┐рдд рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ "рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рдирд╣реАрдВ рд╣реЛрдЧреАред рдЙрд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ .module.css рдХрд╛ рдЙрдкрдпреЛрдЧ рдпрд╣ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдХрд┐ рдмрд┐рд▓реНрдб рдЯреВрд▓ рджреНрд╡рд╛рд░рд╛ рдХрд┐рд╕ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЛ рдХрд┐рд╕ рддрд░реАрдХреЗ рд╕реЗ рд╕рдВрднрд╛рд▓рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

CSS рдореЙрдбреНрдпреВрд▓реНрд╕ рдХрд▓реНрдкрдирд╛ рдПрдХ рдирд╛рдордХрд░рдг рд╕рдореНрдореЗрд▓рди рдХреА рд╕реНрдерд╛рдкрдирд╛ рдирд╣реАрдВ рдХрд░рддреА рд╣реИред

рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдлрд╛рдЗрд▓реЛрдВ рдХреЗ рд╡рд┐рд╕реНрддрд╛рд░ рдкрд░ рдХреЛрдИ рд╕рдореНрдореЗрд▓рди рд╕реНрдерд╛рдкрд┐рдд рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдореЙрдбреНрдпреВрд▓ рдХреИрд╕реЗ рдЖрдпрд╛рдд рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВред

рдЬрд╣рд╛рдВ рдореИрдВ рдЬрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ .module.css рдиреЗрдХреНрд╕реНрдЯ.рдЬреЗрдПрд╕ рдЯреАрдореЛрдВ рджреНрд╡рд╛рд░рд╛ рдЪреБрдиреЗ рдЧрдП рдХрдиреНрд╡реЗрдВрд╢рди рд╣реИрдВ рдФрд░ рдЙрдиреНрд╣реЗрдВ рдЗрд╕ рд╕рдВрднрд╛рд╡рдирд╛ рдХреЛ "рд╕реБрд╡рд┐рдзрд╛рдЬрдирдХ" рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдХрд┐ рдХреБрдЫ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЗрд╕реЗ рдмрджрд▓ рд╕рдХрддреЗ рд╣реИрдВ рднрд▓реЗ рд╣реА рд╡рд╣ рдкреЛрд╕реНрдЯ- рдЗрдВрд╕реНрдЯреЙрд▓реЗрд╢рди рдореЙрдбреНрдпреВрд▓ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╣реЛ рдЬреЛ monkey patching

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ .module.css рдкрд╣рд▓рд╛ рдирд╛рдордХрд░рдг рд╕рдореНрдореЗрд▓рди рд╣реИ

module.css рдХрдиреНрд╡реЗрдВрд╢рди рдХреА рдкрд╕рдВрдж рд╕реАрдПрд╕рдПрд╕-рдореЙрдбреНрдпреВрд▓ / рд╕реАрдПрд╕рдПрд╕-рдореЙрдбреНрдпреВрд▓ рджреНрд╡рд╛рд░рд╛ рдкрд╣рд▓реЗ рд╕реЗ рд╕реНрдерд╛рдкрд┐рдд рдХреЙрдиреНрд╡реЗрдВрдЯ рд╕реЗ рдЯрдХрд░рд╛рддреА рд╣реИ
рдпрд╣рд╛рдБ рдЙрджрд╛рд╣рд░рдг:
create-react-app.dev/docs/adding-a-css-modules-stylesheet
рдФрд░ рдпрд╣рд╛рдБ:
gatsbyjs.org/docs/css-modules

рд╣рд╛рдВ, рд╢рд╛рдпрдж рд╡рд┐рд╕реНрддрд╛рд░ рдХреЛ рд╡рд┐рдиреНрдпрд╛рд╕ рдпреЛрдЧреНрдп рдмрдирд╛рдиреЗ рд╕реЗ рдпрд╣ рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╕реЗ рдЕрдзрд┐рдХ рдЬрдЯрд┐рд▓ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдХрдо рд╕реЗ рдХрдо рдЖрдк рдПрдХ рдирд┐рд░рдВрддрд░ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ .module.css рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕реЗ рдмрдВрджрд░ рдкреИрдЪрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдХрдИ рд╕реНрдерд╛рдиреЛрдВ рдкрд░ рд╣рд╛рд░реНрдб-рдХреЛрдб рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ

рдЖрдк рдпрд╣рд╛рдБ рдЕрдкрдиреА рдмрд╛рдд рдХрд╛ рдЦрдВрдбрди рдХрд░ рд░рд╣реЗ рд╣реИрдВ, .module.css рдХрд╛ рдЙрдкрдпреЛрдЧ рдЙрд╕реА рд╕реБрд╡рд┐рдзрд╛ рдХреЗ рд▓рд┐рдП create-react-app рдФрд░ gatsby рджреНрд╡рд╛рд░рд╛ рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИред рдпрд╣ рдПрдХ рд╕реНрдерд╛рдкрд┐рдд рдкреИрдЯрд░реНрди рд╣реИред

рдирд╛рдордХрд░рдг рд╕рдореНрдореЗрд▓рди рдХреЛ рдмрджрд▓рдирд╛ рд╣рд╛рд▓рд╛рдВрдХрд┐ рдПрдХ рд╕реНрдерд╛рдкрд┐рдд рдкреИрдЯрд░реНрди рдирд╣реАрдВ рд╣реИ рдФрд░ Next.js. рдореЗрдВ рдЗрд╕реЗ рдЕрдиреБрдорддрд┐ рджреЗрдиреЗ рдХрд╛ рдХреЛрдИ рдХрд╛рд░рдг рдирд╣реАрдВ рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ .module.css рдкрд╣рд▓рд╛ рдирд╛рдордХрд░рдг рд╕рдореНрдореЗрд▓рди рд╣реИ рд╡рд┐рд╕реНрддрд╛рд░ Next.Js. рджреНрд╡рд╛рд░рд╛ рд▓рдЧрд╛рдпрд╛ рдЧрдпрд╛ рдХреГрдкрдпрд╛ рдореБрдЭреЗ рд╕реБрдзрд╛рд░реЗрдВ рдЕрдЧрд░ рдореИрдВ рдЧрд▓рдд рд╣реВрдВред

Next.js рд╡рд┐рдиреНрдпрд╛рд╕ рд╡рд┐рдХрд▓реНрдкреЛрдВ рдкрд░ рд╕рдореНрдореЗрд▓рдиреЛрдВ рдХреА рд╕реНрдерд╛рдкрдирд╛ рдХрд░рддрд╛ рд╣реИ, рдЬреИрд╕реЗ:

  • pages рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдорд╛рд░реНрдЧ рд╣реИрдВ
  • pages/api рдПрдкреАрдЖрдИ рдорд╛рд░реНрдЧ рд╣реИрдВ
  • .js .tsx .tsx

рд╣рд╛рдп @timneutkens

рдкреИрдЯрд░реНрди рдпрд╣ рд╣реИ рдХрд┐ CSS Modules рдХреИрд╕реЗ рд╕реНрдерд╛рдкрд┐рдд рдХрд░рддрд╛ рд╣реИ рдХрд┐ CSS рдлрд╛рдЗрд▓реЗрдВ рдЬреЗрдПрд╕ рдСрдмреНрдЬреЗрдХреНрдЯреНрд╕ рдореЗрдВ рдХреИрд╕реЗ рдЖрдпрд╛рдд рдХреА рдЬрд╛рдиреА рдЪрд╛рд╣рд┐рдП, рдкреНрд░рд╢реНрди рдореЗрдВ CSS рдХрд╛ рдирд╛рдо рд╕реАрдорд╛рдВрдд рд╣реИред рдЙрд╕ рд╕рдВрдмрдВрдз рдореЗрдВ Next.js рдирдП рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХреЗ рд╕рд╛рде рдЙрд╕ рд╡рд┐рд╢реЗрд╖ рдкреИрдЯрд░реНрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред
Gatsby рдФрд░ CRA рдореЗрдВ CSS Modules рдкрд╣рд▓реЗ рд╣реА рд▓рд╛рдЧреВ рд╣реЛ рдЪреБрдХреЗ рдереЗ: https://github.com/zeit/next-plugins/tree/master/packages/next-css

рдореИрдВ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЧрдП рдЕрдзрд┐рд╡реЗрд╢рди рдкрд░ рд╕рд╡рд╛рд▓ рдирд╣реАрдВ рдХрд░рддрд╛, .module.css , рдпрд╣ рдЬрд╛рдирддреЗ рд╣реБрдП рднреА рдХрд┐ рдореИрдВ CRA рдФрд░ Gatsby рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЛ CSS Modules рд╕рд╛рде рднреНрд░рдорд┐рдд рдХрд░ рд╕рдХрддрд╛ рдерд╛ред рдПрдХ рдЙрдкрдпреБрдХреНрдд рдирд╛рдо рдЪреБрдирдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИ рдФрд░ рд╣рд░ рдХреЛрдИ рд╣рдореЗрд╢рд╛ рдЦреБрд╢ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИред

рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореЗрд░рд╛ рдорд╛рдирдирд╛ тАЛтАЛрд╣реИ рдХрд┐ .m.css рдХрдиреНрд╡реЗрдВрд╢рди рдмреЗрд╣рддрд░ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдЫреЛрдЯрд╛ рд╣реИ (рд╡рд┐рд╕реНрддрд╛рд░ рдХреЗ рд▓рд┐рдП рдЕрдзрд┐рдХ рдЙрдкрдпреБрдХреНрдд) рдФрд░ рдХрдо рдирд┐рд░рд░реНрдердХ (рдЖрдпрд╛рдд рд╡рд┐рд╡рд░рдг рдореЙрдбреНрдпреВрд▓ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣реИ) рдореИрдВ рдЪрд╛рд╣реВрдВрдЧрд╛ рдХрд┐ рдЖрдк рдЗрд╕реЗ рдзреНрдпрд╛рди рдореЗрдВ рд░рдЦреЗрдВред рдПрдХ рдирд┐рд░рдВрддрд░ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рд╕рд╛рдорд╛рдиреНрдп рдФрд░ .module.css рдореЗрдВ рд╕рдореНрдореЗрд▓рдиреЛрдВ рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░рдирд╛ рдЙрдиреНрд╣реЗрдВ рдкреИрдЪ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкрд░реНрдпрд╛рдкреНрдд рд╣реЛрдЧрд╛ред

рд╡реИрд╕реЗ рднреА, рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдкрд░ рдХрдИ рдмрдзрд╛рдИред рдЖрдкрдиреЗ рдПрдХ рд╢рд╛рдирджрд╛рд░ рдХрд╛рдо рдХрд┐рдпрд╛ рд╣реИ, рдпрд╣ рдПрдХ "рд▓рдЧрднрдЧ" рдЕрд╕рдВрднрд╡ рдХрд╛рдо рд▓рдЧ рд░рд╣рд╛ рдерд╛ред

рдпрджрд┐ рдореИрдВ рдирд╛рдордХрд░рдг рд╕рдореНрдореЗрд▓рди рдореЗрдВ рдЕрдкрдиреЗ рджреЛ рд╕реЗрдВрдЯ рдЬреЛрдбрд╝ рд╕рдХрддрд╛ рд╣реВрдВ: рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдПрдХ рдШрдЯрдХ рдкреБрд╕реНрддрдХрд╛рд▓рдп рд╣реИ рдЬреЛ рд╕рдВрдХрд▓рди рдХреЗ рд▓рд┐рдП PostCSS рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдХреЗ рдмрд╛рдж рд╕реЗ .pcss рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ рдФрд░ рд╣рдордиреЗ рдЗрд╕ рдирд╛рдордХрд░рдг рд╕рдореНрдореЗрд▓рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдирд┐рд░реНрдгрдп рд▓рд┐рдпрд╛ рд╣реИ, рддреЛ рд╣рдореЗрдВ "CSS" рдореЙрдбреНрдпреВрд▓ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рднреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред ред рдЖрдк рдЗрд╕ рдорд╛рдорд▓реЗ рдХреЛ рдХреИрд╕реЗ рд╕рдВрдмреЛрдзрд┐рдд рдХрд░реЗрдВрдЧреЗ? рд╣рдо рд╡рд░реНрддрдорд╛рди рдореЗрдВ рд╡реЗрдмрдкреИрдХ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреЛ рд╣реИрдХ рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдФрд░ рд▓реЛрдбрд░реЛрдВ рдХреЗ рдкрд░реАрдХреНрд╖рдг regex рдХреЛ рдкреИрдЪ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдпрд╣ рдЧрдВрджрд╛ рд▓рдЧрддрд╛ рд╣реИ рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рдХрд▓реНрдкрдирд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рдореИрдВ рдХрд▓реНрдкрдирд╛ рдХрд░рддрд╛ рд╣реВрдВ рдХрд┐ рд╡реИрд╢реНрд╡рд┐рдХ рд░реВрдк рдореЗрдВ .module.css рд╕рдорд░реНрдерд┐рдд рдкреЛрд╕реНрдЯрд╕реАрдПрд╕рдПрд╕ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рд╣реИред

рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ, рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдореБрдЭреЗ рдЫреБрдЯреНрдЯреА рдЪрд╛рд╣рд┐рдПред

рдкреАрдЖрд░ рдХреА рд╕рдореАрдХреНрд╖рд╛ рдХрд░рддреЗ рд╕рдордп: https://github.com/zeit/next.js/pull/9686 рдореИрдВрдиреЗ рд╕реЛрдЪрд╛ рдХрд┐ рдореИрдВрдиреЗ "рджреЗрдЦрд╛" рд╣реИ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдЖрдпрд╛рдд рдХрд┐рдП рдЧрдП рдереЗ рдЬреИрд╕реЗ рдХрд┐ рд╡реИрд╢реНрд╡рд┐рдХ рдореЙрдбреНрдпреВрд▓ рдЖрдпрд╛рдд рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВред

рдореБрдЭреЗ рдкреВрд░реА рдЙрдореНрдореАрдж рд╣реИ рдХрд┐ рдореИрдВрдиреЗ рдпрд╣ рдХреЛрдб рдкрдврд╝ рд▓рд┐рдпрд╛ рд╣реИ:

index.module.css

.redText {
  color: net;
}
import './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = "redText">
      This text should be red.
    </div>
  )
}

рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ рд╡рд╛рд╕реНрддрд╡рд┐рдХрддрд╛ рд╕реЗ рдХреЛрдИ рд▓реЗрдирд╛ рджреЗрдирд╛ рдирд╣реАрдВ рд╣реИред рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрд╕рд▓реА рдХреЛрдб рдпрд╣реА рд╣реИред

import {redText} from './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = {redText}>
      This text should be red.
    </div>
  )
}

рдмрд╕ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд░реВрдк рдореЗрдВ рд╕реАрдЖрд░рдП рдпрд╛ Gatsby рдореЗрдВред рдЗрд╕рд▓рд┐рдП рднреНрд░рдо, рдореЗрд░реА рдЙрд▓рдЭрдиред

рдореИрдВ рдЧрд▓рддреА рдХреЗ рд▓рд┐рдП рд╕рднреА рд╕реЗ рдорд╛рдлреА рдорд╛рдВрдЧрддрд╛ рд╣реВрдВред

:-(

рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдореБрдЦреНрдп рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐:

рдореЗрд░реЗ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ CSS рдореЙрдбреНрдпреВрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ, рдФрд░ рдХреБрдЫ рддреГрддреАрдп-рдкрдХреНрд╖ рдШрдЯрдХ CSS рдореЙрдбреНрдпреВрд▓ рдХрд╛ рднреА рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред
рд▓реЗрдХрд┐рди ... рдХреБрдЫ рддреГрддреАрдп-рдкрдХреНрд╖ рдШрдЯрдХ рд╡реИрд╢реНрд╡рд┐рдХ CSS рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ .module.css рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХрд╛ рд╕рдорд╛рдзрд╛рди рд╕рдордЭрдирд╛ рдФрд░ рд▓рд╛рдЧреВ рдХрд░рдирд╛ рдЖрд╕рд╛рди рд╣реИред
рдФрд░ рдЕрдиреНрдп рдврд╛рдВрдЪреЗ (рд╕реАрдЖрд░рдП other рдЧреИрдЯреНрд╕рдмреА) рдПрдХ рдЖрдо рд╕рд╣рдорддрд┐ рдкрд░ рдкрд╣реБрдВрдЪ рдЧрдП рд╣реИрдВред

рдЕрдм рддрдХ, рдореБрдЭреЗ рд╡рд┐рд╕реНрддрд╛рд░ рд╕рдорд╛рдзрд╛рди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреЛрдИ рд╕рдорд╕реНрдпрд╛ рдирд╣реАрдВ рд╣реБрдИ рд╣реИред
рдЗрд╕рд▓рд┐рдП, рдореБрдЭреЗ рдЖрд╢рд╛ рд╣реИ рдХрд┐ .module.css рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХреЗ рд╡рд┐рдХрд╛рд╕ рдХреЛ рдмрдврд╝рд╛рд╡рд╛ рдорд┐рд▓реЗрдЧрд╛ред

рдпрджрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рд╕рдорд╕реНрдпрд╛ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреЛрдИ рдЕрдиреНрдп рд╕рдорд╛рдзрд╛рди рд╣реИ, рддреЛ рдпрд╣ рдмреЗрд╣рддрд░ рд╣реИред

@bySabi
рд╣рд╛рд▓рд╛рдВрдХрд┐ .m.css рдХрдо рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдирд╣реАрдВ рд▓рдЧрддрд╛ рдХрд┐ рдпрд╣ рдмреЗрд╣рддрд░ рд╣реИред
рдХреНрдпрд╛ рдпрд╣ min.css рдпрд╛ module.css ?

@ xyy94813 рдпрд╛ рдареАрдХ рдЗрд╕рдХреЗ рд╡рд┐рдкрд░реАрдд, рд╕рднреА рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдореЙрдбреНрдпреВрд▓ рд╣реИрдВ, .global.scss рдлрд╛рдЗрд▓реЗрдВ рд╡реИрд╢реНрд╡рд┐рдХ рд╣реЛрдВрдЧреА

@felixmosh
рд▓реЗрдХрд┐рди, рдпрд╣ рдкреНрд░рдХрд╛рд╢рд┐рдд рдШрдЯрдХреЛрдВ рдХреЗ рд▓рд┐рдП рдЕрдорд┐рддреНрд░ рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕рдореНрдореЗрд▓рди рдПрдХ рдЕрдЪреНрдЫрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╣реИ, рд▓реЗрдХрд┐рди рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд▓рд┐рдП рд╡рд┐рд╢рд┐рд╖реНрдЯ рдХреБрдЫ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рд╡рд┐рдХрд▓реНрдк рдЕрдВрддрддрдГ рдЙрдкрд▓рдмреНрдз рдХрд░рд╛рдП рдЬрд╛рдиреЗ рдЪрд╛рд╣рд┐рдП, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдЬрд┐рдиреНрд╣реЗрдВ css-loader , рдХреНрдпреЛрдВрдХрд┐ рдХреБрдЫ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ "рд╕реНрдХреЙрдк" рдкрд░ рдирд┐рдпрдВрддреНрд░рдг рдЪрд╛рд╣рддреЗ рд╣реИрдВред рд╡рд░реНрдЧ рдХреЗ рдирд╛рдо рдЖрдЙрдЯрдкреБрдЯ рд╣реИрдВред рдПрдХ рд░реЗрдЧреЗрдХреНрд╕ рдХреА рдЖрдкреВрд░реНрддрд┐ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд┐рдХрд▓реНрдк рдЬреЛрдбрд╝рд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдЬреЛ рдпрд╣ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдХреМрди рд╕реА CSS рдлрд╛рдЗрд▓реЗрдВ "рдореЙрдбреНрдпреВрд▓" рдХреЗ рд░реВрдк рдореЗрдВ рд▓реЛрдб рдХреА рдЧрдИ рд╣реИрдВ

рдЬреИрд╕рд╛ рдХрд┐ рдХреБрдЫ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЗрд╕ рдмрд╛рдд рдкрд░ рдирд┐рдпрдВрддреНрд░рдг рдХрд░рдирд╛ рдЪрд╛рд╣реЗрдВрдЧреЗ рдХрд┐ "рд╕реНрдХреЛрдк" рд╡рд░реНрдЧ рдХреЗ рдирд╛рдо рдЖрдЙрдЯрдкреБрдЯ рдХреИрд╕реЗ рд╣реИрдВ

рдЖрдк рдХреНрдпреЛрдВ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдХреЗ рдЙрджрд╛рд╣рд░рдг? рдореИрдВ рдХрд┐рд╕реА рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪ рднреА рдирд╣реАрдВ рд╕рдХрддрд╛ред

рдЙрджрд╛рд╣рд░рдг рдпрджрд┐ рдЖрдк рдРрд╕рд╛ рдХреНрдпреЛрдВ рдЪрд╛рд╣рддреЗ рд╣реИрдВ? рдореИрдВ рдХрд┐рд╕реА рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪ рднреА рдирд╣реАрдВ рд╕рдХрддрд╛ред

@timneutkens рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдореИрдВ рдПрдХ рдирд╛рдордХрд░рдг рдкреИрдЯрд░реНрди рдХрд╛ рдЙрддреНрдкрд╛рджрди рдХрд░рдирд╛ рдкрд╕рдВрдж рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдЬреЛ рдореВрд▓ рд░реВрдк рд╕реЗ рдореЗрд░реЗ рд╡реИрд╢реНрд╡рд┐рдХ рд╡рд░реНрдЧреЛрдВ рдХреЗ рдирд╛рдордХрд░рдг рдкреИрдЯрд░реНрди рдХреЗ рд╕рд╛рде рдЕрдВрдд рдореЗрдВ рдХреЗрд╡рд▓ рд╕реНрдХреВрдк рдХрд┐рдП рдЧрдП рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рдЕрдиреБрд░реВрдк рд╣реИред
рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдореИрдВ рдкреЛрд╕реНрдЯ-рдмрд┐рд▓реНрдб рдкрд░реНрдЬрд┐рдВрдЧ рдпрд╛ рд╡рд┐рднрд╛рдЬрди рдпрд╛ рд▓реЛрдбрд┐рдВрдЧ рдкрд░рд┐рджреГрд╢реНрдпреЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪ рд░рд╣рд╛ рдерд╛ рдЬрд╣рд╛рдВ рдореИрдВ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рдирд╛рдорд╕реНрдерд╛рди рдХреЛ рд╢реНрд╡реЗрддрд╕реВрдЪреА рдореЗрдВ рд░рдЦрдирд╛ рдЪрд╛рд╣ рд╕рдХрддрд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЕрднреА рддрдХ рдХрд╛рдо рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдпрд╛рдж рд░рдЦрдирд╛ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ рдХрд┐ рдкреНрд░рд╛рд░рдВрднрд┐рдХ рд╕реЗрдЯрдЕрдк рдХреЛ рдЦрддреНрдо рдХрд░рдиреЗ рдФрд░ рдПрдХрд░реВрдкрддрд╛ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд┐рдЪрд╛рд░рд┐рдд рд░реВрдкрд░реЗрдЦрд╛ рдЖрдкрдХреЗ рд▓рд┐рдП рдирд┐рд░реНрдгрдп рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП рд╣реИред

рдЙрди рдлреИрд╕рд▓реЛрдВ рдореЗрдВ рд╕реЗ рдХреБрдЫ рдРрд╕реЗ рдбрд┐рдлреЙрд▓реНрдЯреНрд╕ рдХреЗ рд╕рд╛рде рдЖрдиреЗ рдЪрд╛рд╣рд┐рдП, рдЬрд┐рдиреНрд╣реЗрдВ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рд╡рд┐рдХрд▓реНрдкреЛрдВ рдпрд╛ рдПрдХреНрд╕рдЯреЗрдВрд╢рдиреЛрдВ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдмрджрд▓рд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рд╕рдм рдХреБрдЫ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдЕрдиреБрдХреВрд▓рди рдпреЛрдЧреНрдп рд╣реЛрдиреЗ рд╕реЗ рдЖрдк рдХреЛрдбрдмреЗрд╕ рдХреЛ рдмрдврд╝рд╛рддреЗ рд╣реИрдВ рдЬреЛ рдкрд░реАрдХреНрд╖рдг, рд░рдЦрд░рдЦрд╛рд╡ рдФрд░ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреЗ рд▓рд┐рдП рдЕрдзрд┐рдХ рдХреЛрдб рдмрдирд╛рддрд╛ рд╣реИ рдЬрд┐рд╕реЗ рдмрджрд▓реЗ рдореЗрдВ рднреА рдмрдирд╛рдП рд░рдЦрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред

рд╕реНрдХреЛрдкреНрдб рдЖрдЙрдЯрдкреБрдЯ рд╣реИрд╢ рдкреИрдЯрд░реНрди рдЬреИрд╕рд╛ рдХреБрдЫ рд╣реЛрддрд╛ рд╣реИ рдпрджрд┐ рдЖрдк рдЙрд╕ рдмрд┐рдВрджреБ рдкрд░ рдкрд╣реБрдВрдЪрддреЗ рд╣реИрдВ рдЬрд╣рд╛рдВ рдЖрдк рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдХреЛ рдЕрдзрд┐рд▓реЗрдЦрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП _need_ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рд╕рдВрднрд╡ рд╣реИ рдХрд┐ рдЖрдк рдЙрд╕ рдмрд┐рдВрджреБ рдкрд░ рд╣реЛрдВ рдЬрд╣рд╛рдВ рдЖрдкрдХреЛ рд╕рд┐рд░реНрдл рдЕрдкрдиреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рдХрд╕реНрдЯрдо рд▓реЛрдбрд░ рд▓рд┐рдЦрдирд╛ рдЪрд╛рд╣рд┐рдПред

рдЬрдм рдирдП рд░рд┐рдПрдХреНрдЯ рджреЗрд╡реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реВрдБ рддреЛ рдореБрдЭреЗ рдХреНрд▓рд╛рд╕рдирд╛рдо рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдПрдХ рдШрдЯрдХ рдХреЛ рд╕реНрдХреВрдкрд┐рдВрдЧ рдХреА рдЕрд╡рдзрд╛рд░рдгрд╛ рдХреЛ рд╡реНрдпрдХреНрдд рдХрд░рдирд╛ рд╣рдореЗрд╢рд╛ рдмрд╣реБрдд рдЖрд╕рд╛рди рд▓рдЧрд╛ред рдмрд╕ рдЕрдкрдиреЗ рдШрдЯрдХ рдореЗрдВ рдмрд╛рд╣рд░реА рддрддреНрд╡ рдХреЛ рдПрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╡рд░реНрдЧрдирд╛рдо рджреЗрдВ, рдЖрдорддреМрд░ рдкрд░ рдЖрдкрдХреЗ рдШрдЯрдХ рдирд╛рдо рдХреЗ рд╕рдорд╛рди, рдФрд░ рдЕрдкрдиреА рд╢реИрд▓реА рдЗрд╕ рддрд░рд╣ рд▓рд┐рдЦреЗрдВ рдЬреИрд╕реЗ рдХрд┐ SC

.Navbar {
  .logo { ... }
  .nav-item { ... }
}

рдореИрдВ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ css-modules рдХреЗ рд▓рд╛рднреЛрдВ рдХреЛ рджреЗрдЦрддрд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдореИрдВ рдереЛрдбрд╝рд╛ рдЪрд┐рдВрддрд┐рдд рд╣реВрдВ рдХрд┐ рдЙрдкрд░реЛрдХреНрдд рд╡рд┐рдзрд┐ рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рдиреЗ рд╕реЗ Next.js рдирдП рджреЗрд╡реЛрдВ рдХреЗ рд▓рд┐рдП рдХрдо рдЕрдиреБрдХреВрд▓ рд╣реЛ рдЬрд╛рдПрдЧрд╛ред рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЕрдЧрд░ рдЖрдк рдмрд╣реБрдд рд╕рд╛рд░реЗ рд▓реЛрдЧреЛрдВ рдХреЛ рд╕реАрдПрд╕рдПрд╕ рдСрд░реНрдбрд░ рджреЗрдиреЗ рд╡рд╛рд▓реЗ рдореБрджреНрджреЛрдВ рдореЗрдВ рднрд╛рдЧ рд▓реЗрддреЗ рд╣реБрдП рджреЗрдЦ рд░рд╣реЗ рд╣реЛрдВ, рддреЛ рдпрд╣ рдПрдХ рдЕрдЪреНрдЫрд╛ рдЯреНрд░реЗрдбрдСрдл рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдЖрд╢реНрдЪрд░реНрдп рд╣реИ рдХрд┐ css-modules рд▓рд╛рдЧреВ рд╣реЛрдиреЗ рдкрд░ рдХрдо рд╕реЗ рдХрдо next.config.js рдорд╛рдзреНрдпрдо рд╕реЗ рдЕрдХреНрд╖рдо рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рдпрд╛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдПрдХ рдмрд┐рд▓реНрдб-рдЯрд╛рдЗрдо рдЪреЗрдХ рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдЬреЛ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рддрд╛ рд╣реИ рдХрд┐ рд╕рднреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдПрдХ рдЕрджреНрд╡рд┐рддреАрдп рдХреНрд▓рд╛рд╕рдиреЗрдо рдХреЗ рд╕рд╛рде рдареАрдХ рд╕реЗ рд╕реНрдХреВрдк рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдирд╣реАрдВ рд╣реИ рдХрд┐ рддрдХрдиреАрдХреА рд░реВрдк рд╕реЗ рдпрд╣ рдХрд┐рддрдирд╛ рдЙрд▓реНрд▓реЗрдЦрдиреАрдп рд╣реИред

рдореИрдВ рдереЛрдбрд╝рд╛ рдЪрд┐рдВрддрд┐рдд рд╣реВрдВ рдХрд┐ рдЕрдм рдЙрдкрд░реЛрдХреНрдд рд╡рд┐рдзрд┐ рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рдиреЗ рд╕реЗ Next.js рдирдП рджреЗрд╡реЛрдВ рдХреЗ рд▓рд┐рдП рдХрдо рдЕрдиреБрдХреВрд▓ рд╣реЛ рдЬрд╛рдПрдЧрд╛

рдЬрдм рддрдХ рдореБрдЭреЗ рдХреБрдЫ рдЧрд▓рдд рдирд╣реАрдВ рд▓рдЧрддрд╛ рд╣реИ, рдореБрдЭреЗ рдирд╣реАрдВ рд▓рдЧрддрд╛ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреА рдмрд╛рдд рдЕрдирдиреНрдп рд╣реИ, рдмрд▓реНрдХрд┐ рд▓реЛрдбрд░ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рдкрд╛рд░реНрд╕рд░ рдХреЛ рдХреЗрд╡рд▓ рддрднреА рд▓рд╛рдЧреВ рдХрд░реЗрдЧрд╛ рдЬрдм рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдЖрдпрд╛рдд рдХреА рдЧрдИ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ *.module.css рдирд╛рдордХрд░рдг рдкреИрдЯрд░реНрди, рдпрд╛ *.module.scss рдЙрд╕ рдмрд╛рдд рдХреЗ рд▓рд┐рдП

@ Lunelson-рдмреАрдПрд▓

рдпрд╣ рд╕реЗрдореА-рдПрдХреНрд╕рдХреНрд▓реВрд╕рд┐рд╡ рд╣реИ рдХрд┐ рдХреИрд╕реЗ CRA рдпрд╛ Gatsby рдХреЗрд╡рд▓ рдкрд╛рд░реНрд╕рд░ рдХреЛ рд╕рдХреНрд╖рдо рдХрд░рддрд╛ рд╣реИ, рдЬрдм рдЖрдк рдирд╛рдордХрд░рдг рдкреИрдЯрд░реНрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред рдЕрдЧрд▓рд╛ рдЧреИрд░-рдореЙрдбреНрдпреВрд▓ рдХреЛ рд╕реАрдзреЗ рдЬреЗрдПрд╕ рдореЗрдВ рдЖрдпрд╛рдд рдХрд░рдиреЗ рд╕реЗ рд░реЛрдХ рджреЗрдЧрд╛ред

RFC рд╕реЗ:

/* components/button.js */
import { btnLarge } from './button.module.css'

// import '../styles.css'; // <-- this would be an error

рдЧреИрд░-рдореЙрдбреНрдпреВрд▓ рдХрдХреНрд╖рд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдЕрдкрдиреА рд╡реИрд╢реНрд╡рд┐рдХ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдореЗрдВ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА рдЬреЛ рдХреЗрд╡рд▓ _app.js рдореЗрдВ рдЖрдпрд╛рдд рд╣реЛ рдЬрд╛рддреА рд╣реИ (рдпрджрд┐ рдЖрдк рдЙрдиреНрд╣реЗрдВ рдЕрдкрдиреЗ рдШрдЯрдХ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЗ рд╕рд╛рде рд╡рд┐рднрд╛рдЬрд┐рдд рдФрд░ рдХреЛрд▓реЛрдХреЗрдЯреЗрдб рдЪрд╛рд╣рддреЗ рдереЗ)ред рдЕрдиреНрдпрдерд╛ рдЙрдиреНрд╣реЗрдВ рд╕реАрдзреЗ рдЙрд╕ рд╡реИрд╢реНрд╡рд┐рдХ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдореЗрдВ рд░рдЦрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреАред

рдореИрдВ next.js. рдХрд╛ рдирдпрд╛ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд╣реВрдВ рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдкрдврд╝рдиреЗ рдХреЗ рдмрд╛рдж рдФрд░ рдереЛрдбрд╝рд╛ рдЙрд▓рдЭрди рдореЗрдВ рдорд╣рд╕реВрд╕ рдХрд░рддрд╛ рд╣реВрдВред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЕрдЧрд░ next.js рдмрд┐рд▓реНрдб-рдЗрди-рд╕реАрдПрд╕рдПрд╕-рд╕рдкреЛрд░реНрдЯ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рддрд╛ рд╣реИ , рддреЛ рд╣рдореЗрдВ @ рдЕрдЧрд▓реЗ-рд╕реАрдПрд╕рдПрд╕ рдкреНрд▓рдЧрдЗрди рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рдФрд░ "ModuleParseError" рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рддреНрд░реБрдЯрд┐ рдлреЗрдВрдХ рджреЗрддрд╛ рд╣реИред
рдпрджрд┐ рдореИрдВ CSS рдЖрдпрд╛рдд рд╕рдорд░реНрдерди рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП @ рдЕрдЧрд▓реА-рд╕реАрдПрд╕рдПрд╕ рдкреНрд▓рдЧрдЗрди рдореЗрдВ рдЬреЛрдбрд╝ рд░рд╣рд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рддреЛ рдмрд┐рдирд╛ @ рдЕрдЧрд▓реА-рд╕реАрдПрд╕рдПрд╕ рдХреЗ рдмрд┐рд▓реНрдб-рдЗрди-рд╕реАрдПрд╕рдПрд╕-рд╕рдорд░реНрдерди, рдХреНрдпрд╛ рдЖрдк рдПрдХ рдЙрджрд╛рд╣рд░рдг рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ?
рд╕рдмрдХреЛ рд╢реБрдХреНрд░реАрдпрд╛ред

рдореИрдВ next.js. рдХрд╛ рдирдпрд╛ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд╣реВрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдкрдврд╝рдиреЗ рдХреЗ рдмрд╛рдж рдФрд░ рдореИрдВ рдереЛрдбрд╝рд╛ рдЙрд▓рдЭрди рдореЗрдВ рд╣реВрдВред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ next.js рдмрд┐рд▓реНрдб-рд╕реАрдПрд╕рдПрд╕ рд╕рдорд░реНрдерди рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рд╣рдореЗрдВ @ рдЕрдЧрд▓реЗ-рд╕реАрдПрд╕рдПрд╕ рдкреНрд▓рдЧрдЗрди рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рдФрд░ "ModuleParseError" рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рддреНрд░реБрдЯрд┐ рдирд╣реАрдВ рдорд┐рд▓рддреА рд╣реИред
рдЕрдЧрд░ рдореИрдВ CSS рдЖрдпрд╛рдд рд╕рдорд░реНрдерди рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ @ рдЕрдЧрд▓реЗ-рд╕реАрдПрд╕рдПрд╕ рдкреНрд▓рдЧрдЗрди рдореЗрдВ рдЬреЛрдбрд╝рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рддреЛ рдЖрдк рдмрд┐рдирд╛ @-css рдХреЗ рдХреИрд╕реЗ css-build рдмрдирд╛рддреЗ рд╣реИрдВ, рдХреНрдпрд╛ рдЖрдк рдПрдХ рдЙрджрд╛рд╣рд░рдг рджреЗ рд╕рдХрддреЗ рд╣реИрдВ?
рдзрдиреНрдпрд╡рд╛рдж @ рдЖрд▓ ред

рдЕрдкрдиреЗ next.config.js рдХреЗ рд▓рд┐рдП рдЗрд╕ рддрд░рд╣ рд╕реЗ рдПрдХ рд╡рд┐рдиреНрдпрд╛рд╕ рдЬреЛрдбрд╝реЗрдВ:

module.exports = {
  experimental: {
    css: true
  }
}

@erkanunluturk рдзрдиреНрдпрд╡рд╛рдж, рдпрд╣ рдареАрдХ рд╣реИ, рд▓реЗрдХрд┐рди рдПрдХ рдкреНрд░рдпреЛрдЧрд╛рддреНрдордХ рд╡рд┐рд╢реЗрд╖рддрд╛ рдЪреЗрддрд╛рд╡рдиреА рд╣реИ, рдХреНрдпрд╛ рдЗрд╕рд╕реЗ рдХреЛрдИ рдлрд░реНрдХ рдкрдбрд╝рддрд╛ рд╣реИ?
рдФрд░ рдпрд╣ рдХреИрд╕реЗ antd рдХреЗ рд╕рд╛рде рд╕рдВрдЧрдд рд╣реИ? рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдЪреАрдВрдЯреА-рдбрд┐рдЬрд╛рдЗрди рдареАрдХ рд╣реИред

@ рдЯрд╛рдЗрдорд░ рдЖрдк рдПрдХ рдЙрджрд╛рд╣рд░рдг рдЖрдпрд╛рдд рдПрдВрдЯреА-рдбрд┐рдЬрд╝рд╛рдЗрди рдЙрдкрдпреЛрдЧ [RFC] css рд╕рдорд░реНрдерди рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ? рдзрдиреНрдпрд╡рд╛рджред

рдЬрдм рдореИрдВ рдХрд┐рд╕реА рдЕрдиреНрдп рд▓рд┐рдВрдХ рдореЗрдВ рд╣реВрдВ, рддрдм рднреА рдореБрдЭреЗ Router.push ("/") рдХреЗ рд╕рд╛рде рд╕рдорд╕реНрдпрд╛ рд╣реИред рдХрд┐рд╕реА рдХреЗ рдкрд╛рд╕ рдЗрд╕рдХрд╛ рд╣рд▓ рд╣реИ? рдХреГрдкрдпрд╛ рдореЗрд░реА рдЗрддрдиреА рдорджрдж рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж

: рдЪреЗрддрд╛рд╡рдиреА: рдХреГрдкрдпрд╛ рдЗрд╕ рдзрд╛рдЧреЗ рдХрд╛ рдЙрдкрдпреЛрдЧ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд░рдирд╛ рдмрдВрдж рдХрд░реЗрдВ рдФрд░ рдЯреНрд░реИрдХрд░ рдЬрд╛рд░реА рдХрд░реЗрдВред рдпрд╣ рдПрдХ RFC рд╣реИ рдФрд░ рд╡реЗ рдЕрднреА рднреА рдЗрд╕реЗ рд▓рд╛рдЧреВ рдХрд░ рд░рд╣реЗ рд╣реИрдВред

рдЯреАрдо рдХреА рдЕрдВрддрд┐рдо рд╕рд╛рд░реНрдердХ рдЯрд┐рдкреНрдкрдгреА https://github.com/zeit/next.js/issues/8626#issuecomment -531415968 рд╣реИред рдЖрдк рд╡рд░реНрддрдорд╛рди рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХреЛ https://github.com/zext/next рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕рдХреНрд╖рдо рдХрд░рдХреЗ рдореВрд▓реНрдпрд╛рдВрдХрди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ

рдореБрдЭреЗ рдХрд╛рдо рдХреЛ рдЯреНрд░реИрдХ рдХрд░рдиреЗ рдХреА рд╕рдВрднрд╛рд╡рдирд╛ рдпрд╛рдж рдЖ рд░рд╣реА рд╣реИред рд╣рдо рдЖрдкрдХреА рд╕рд╣рд╛рдпрддрд╛ рдХрд┐рд╕ рддрд░рд╣ рд╕реЗ рдХрд░ рд╕рдХрддреЗ рд╣реИ? @ рдЗрд╕ RFC рдХреЛ рдореАрд▓ рдХреЗ рдкрддреНрдерд░, рд░реЛрдбрдореИрдк рдХреЗ рд╕рд╛рде рдЬреЛрдбрд╝рдирд╛ рд╕рдВрднрд╡ рд╣реИ? RFC рдореЗрдВ рдЕрдВрдХреЛрдВ рд╕реЗ рдХреНрдпрд╛ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ?

рдкрддрд╛ рдирд╣реАрдВ, рдХреИрд╕реЗ рдЯреНрд░реИрдХ рдкрд░ рд░рдЦреЗрдВ: рдЙрд▓рдЭрди:

@StarpTech рдпрд╣ RFC рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд▓рд╛рдЧреВ рд╣реИ; рдЧреНрд▓реЛрдмрд▓ рд╕реАрдПрд╕рдПрд╕ рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдЖрд░рдПрдлрд╕реА рд╡рд┐рд╡рд░рдг рдХреЗ рдЕрдиреБрд╕рд╛рд░ рдХрд╛рдо рдХрд░ рд░рд╣реЗ рд╣реИрдВред

рдЖрдк рдПрдХрд▓ рдкреНрд░рдпреЛрдЧрд╛рддреНрдордХ рдзреНрд╡рдЬ рдХреЗ рд╕рд╛рде рджреЛрдиреЛрдВ рдХрд╛ рдкрд░реАрдХреНрд╖рдг рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ!

рдореИрдВ рдЖрдЧреЗ рдЕрдзрд┐рд╕реВрдЪрдирд╛ рдлреИрд▓рд╛рд╡ рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕ рдзрд╛рдЧреЗ рдХреЛ рдмрдВрдж рдХрд░ рджреВрдВрдЧрд╛ред рдпрджрд┐ рдХреЛрдИ рднреА рдореБрджреНрджреЛрдВ рдХреА рдкрд╣рдЪрд╛рди рдХрд░рддрд╛ рд╣реИ, рддреЛ рдХреГрдкрдпрд╛ рдПрдХ рдирдпрд╛ рдореБрджреНрджрд╛ рдЦреЛрд▓реЗрдВ рдФрд░ рд╣рдореЗрдВ рдмрддрд╛рдПрдВ! рдЬрдм рд╕рдорд░реНрдерди рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рд░реВрдк рд╕реЗ рд╕реНрдерд┐рд░ рд╣реЛ (рдФрд░ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рдЪрд╛рд▓реВ рд╣реЛ) рддрдм рд╣рдо рдпрд╣рд╛рдВ рдкреЛрд╕реНрдЯ рдХрд░реЗрдВрдЧреЗред

9.2 рдореЗрдВ рдЙрддрд░рд╛: https://nextjs.org/blog/next-9-2

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕