Next.js: рдмрд╛рд╣рд░реА css рдФрд░ scss рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рд░реНрдп рдХрд░рдирд╛

рдХреЛ рдирд┐рд░реНрдорд┐рдд 19 рдЕрдХреНрддреВре░ 2017  ┬╖  38рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vercel/next.js

рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдмреЗрдорд╛рдиреА рдореБрджреНрджрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЬрд╛рдирдмреВрдЭрдХрд░ рдЦреЛрд▓рд╛ред рдпрд╣ рддреАрди рджрд┐рди рд╣реИ рдЬрдм рдореИрдВ рдПрдХ рдЕрдЧрд▓рд╛.js рдмреЙрдпрд▓рд░рдкреНрд▓реЗрдЯ (redux, redux-saga, ... рдХреЗ рд╕рд╛рде) рд╕реНрдерд╛рдкрд┐рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдпрд╣ рджреЛ рджрд┐рди рд╣реИ рдХрд┐ рдореИрдВ рдмрд╛рд╣рд░реА css рдФрд░ scss рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╕реНрдерд╛рдкрдирд╛ рдореЗрдВ рдлрдВрд╕ рдЧрдпрд╛ рд╣реВрдВред рдореИрдВрдиреЗ рдЧреНрд▓реЛрдмрд▓-рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЗ рд╕рд╛рде-рд╕рд╛рде-рд╕реНрдХреЛрдкреНрдб-рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ-рдФрд░-рдкреЛрд╕реНрдЯрд╕реАрдПрд╕рдПрд╕ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреА рдЬрд╛рдВрдЪ рдХреА рд╣реИ, рд▓реЗрдХрд┐рди рдЙрдирдореЗрдВ рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдореЗрдВ рдкреВрд░реНрд╡ рдореБрджреНрджреЛрдВ рдореЗрдВ рдЙрд▓реНрд▓рд┐рдЦрд┐рдд рдкреНрд░рдореБрдЦ рд╕рдорд╕реНрдпрд╛рдПрдВ рд╣реИрдВред рдореИрдВрдиреЗ рдмрд╣реБрдд рд╕рд╛рд░реЗ рдЦреБрд▓реЗ рдФрд░ рдмрдВрдж рдореБрджреНрджреЛрдВ рдХреЛ рджреЗрдЦрд╛ рд╣реИ рдЬреЛ рд╣реИрдХ рдХреЗ рд╕рд╛рде рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░ рд░рд╣реЗ рд╣реИрдВ ... рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╡рд┐рдЪрд╛рд░ рд╣реИ рдХрд┐ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╕рд░реНрд╡реЛрддреНрддрдо рд╕рдорд╛рдзрд╛рди рдЦреЛрдЬрдиреЗ рдХреЗ рдмрдЬрд╛рдп, рдЗрд╕реЗ рд╡рд░реНрддрдорд╛рди рдЙрдкрд▓рдмреНрдз рд╕рдорд╛рдзрд╛рдиреЛрдВ рдХреЗ рд╕рд╛рде рд╣рд▓ рдХрд░реЗрдВ рдЬрдм рддрдХ рдХрд┐ рдХреЛрдИ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди рди рдорд┐рд▓ рдЬрд╛рдПред рдХреНрдпреЛрдВрдХрд┐ рдХрдИ рд▓реЛрдЧреЛрдВ рдХреЗ рдкрд╛рд╕ рдЕрднреА рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣реИ рдФрд░ рд╡реЗ рдЗрд╕реЗ рдЕрднреА рд╣рд▓ рд╣реЛрддреЗ рджреЗрдЦрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ!

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

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

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

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

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕реНрдХреЛрдкрд┐рдВрдЧ рдореБрджреНрджреЛрдВ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдмрд╣реБрдд рд╕рд╛рдл рд╣реИ, рд╕рд╛рде рд╣реА рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕рд╛рде рдмрд╛рд▓ рдШрдЯрдХреЛрдВ рдХреЛ рдХрдХреНрд╖рд╛рдПрдВ рдкрд╛рд╕ рдХрд░рдирд╛ рдЕрднреА рднреА рд╕рдВрднрд╡ рд╣реИ ( babel-plugin-inline-react-svg рд╕рд╛рде рдЖрдпрд╛рддрд┐рдд рдПрд╕рд╡реАрдЬреА рдкрд░ рдПрдХ рдЧреИрд░-рд╡реИрд╢реНрд╡рд┐рдХ рд╡рд░реНрдЧ рдбрд╛рд▓рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░реЗрдВ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдХреЗ рд╕рд╛рде)ред

рд╡рд╣ рдФрд░ рдореИрдВ рдЬрд┐рддрдирд╛ рд╕рдВрднрд╡ рд╣реЛ рд╕рдХреЗ рдлреНрд░реЗрдорд╡рд░реНрдХ рд▓реЙрдХ-рдЗрди рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП .css рдлрд╛рдЗрд▓реЛрдВ рдХреЛ рдорд╛рдирдХреАрдХреГрдд рдХрд░рдирд╛ рдкрд╕рдВрдж рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдХреИрд╢рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдЙрддреНрдкрд╛рджрди рдореЗрдВ рдПрдХ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдлрд╛рдЗрд▓реЗрдВ (рдФрд░ рдПрдордХреНрдпреВ рдкреЙрд▓реАрдлрд┐рд▓ рдЬреИрд╕реЗ Respond.js рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддреЗ рд╣реИрдВ рдпрджрд┐ рдЖрдк рдкрд░реНрдпрд╛рдкреНрдд рдмрджрдХрд┐рд╕реНрдордд рд╣реИрдВ рдЕрднреА рднреА рдЖрдИрдИ 8 рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдирд╛ рд╣реИ)ред

рднрд╛рд░реА +1
рдпрд╣ рдПрдХ рдмрдбрд╝реА рдирд┐рд░рд╛рд╢рд╛ рд╣реИ рдХрд┐ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕/рдПрд╕рд╕реАрдПрд╕рдПрд╕ рдЬреИрд╕реА рд╕рд░рд▓ рдЪреАрдЬ рдЕрдЧрд▓реЗ.рдЬреЗрдПрд╕ рдХреЗ рд╕рд╛рде рд╣рд╛рд╕рд┐рд▓ рдХрд░рдирд╛ рд▓рдЧрднрдЧ рдЕрд╕рдВрднрд╡ рд╣реИ, рдЬреЛ рдЗрд╕реЗ рдореЗрд░реЗ 90% рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдХреЗ рд▓рд┐рдП рдмреЗрдХрд╛рд░ рдХрд░ рджреЗрддрд╛ рд╣реИред

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

рдЬрдмрдХрд┐ рд╣рдо рд╕реНрдЯрд╛рдЗрд▓ рдЬреЗрдПрд╕рдПрдХреНрд╕ 1 (рд╕рдВрдХрд▓рди рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рд╡реЗрдмрдкреИрдХ) рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рдмрд╛рд╣рд░реА рд╕реНрдЯрд╛рдЗрд▓рд╕ рдХреЛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣реЗ, рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╕реАрдПрд╕рдПрд╕ рдлрд╛рдЗрд▓реЛрдВ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рдкрд░рд┐рд╡рд░реНрддрди рдХреЛ рддреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рдж рд╕реЗ рд╕реНрдЯрд╛рдЗрд▓ рдЬреЗрдПрд╕рдПрдХреНрд╕ 2 рдкрд░ рдЗрд╕реЗ рд╕рдордЭрдиреЗ рдореЗрдВ рдХрдард┐рдирд╛рдИ рд╣реЛ рд░рд╣реА рд╣реИред
рд╡рд░реНрддрдорд╛рди рджреГрд╖реНрдЯрд┐рдХреЛрдг:

import ComponentStyles from './footer.styl';
...
      <style jsx>
        {ComponentStyles}
      </style>

https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss рдХреЛ рдмрд╛рд╣рд░реА scss рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддреЗ рд╣реБрдП рджреЗрдЦрдирд╛ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред

рдкрд░реНрдпрд╛рд╡рд░рдг рдХреА рд╕реНрдерд╛рдкрдирд╛ рдХрд░рддреЗ рд╕рдордп рд╣рдо рдЙрд╕реА рдкрд░реАрдХреНрд╖рд╛ рд╕реЗ рдЧреБрдЬрд░реЗред
рдЖрдЦрд┐рд░рдХрд╛рд░ рд╣рдо рдЦреЛ-рдЧреНрд░рд┐рдб рдХреЗ рд╕рд╛рде scss+post css рдХреЗ рд╕рд╛рде рдПрдХ рд╡реИрд╢реНрд╡рд┐рдХ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЗ рд╕рд╛рде рдмрд╕ рдЧрдПред
рд╣реЙрдЯ рд░реАрд▓реЛрдбрд┐рдВрдЧ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдПрдХ рдЖрджрд░реНрд╢ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реИ (рд╡реИрд╢реНрд╡рд┐рдХ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЛ рдПрдХ рд╕рд╛рде рд▓реЛрдб рд╣реЛрдиреЗ рдХреЗ рдХрд╛рд░рдг), рдпрд╣ рдПрдХ рдареАрдХ рд╕рдордЭреМрддрд╛ рд╣реИред

рдирд┐рд░реНрднрд░рддрд╛

"autoprefixer": "^7.1.6",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"pixrem": "^4.0.1",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.8"

package.json

  ...
  "postcss": {
    "plugins": {
      "lost": {},
      "postcss-easy-import": {
        "prefix": "_"
      },
      "autoprefixer": {},
      "pixrem": {}
    }
  }
  ...

next.config.js

webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      }
    ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader']
      }
    ,
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }
    )
    return config
  }

pages/_document.js

...

import stylesheet from 'styles/main.scss'

   ...
        <Head>
          <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
        </Head>
   ...

рдФрд░ рдлрд┐рд░ рдЖрдк рдЕрдкрдиреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ /styles/main.scss . рд╕реЗ рд╢реБрд░реВ рдХрд░рдХреЗ рдкреНрд░рдмрдВрдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ
рдЖрд╢рд╛ рд╣реИ рдХрд┐ рдЗрд╕рд╕реЗ рд╕рд╣рд╛рдпрддрд╛ рдорд┐рд▓реЗрдЧреА

рдЗрди рджреЛ рд╢реИрд▓реА рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдХреЗ рд╕рд╛рде рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ ( with-global-stylesheet рдФрд░ with-scoped-stylesheets-and-postcss ) рдпрд╣ рд╣реИ рдХрд┐ рдЙрдирдореЗрдВ рд╕реЗ рдХреЛрдИ рднреА рд╕реНрдиреИрдкрд╢реЙрдЯ рдореЗрдВ CSS рдХреЗ рд╕рд╛рде рдЬреЗрд╕реНрдЯ рдФрд░ рд╕реНрдиреИрдкрд╢реЙрдЯ рдкрд░реАрдХреНрд╖рдг рдХреЗ рд╕рд╛рде рдПрдХреАрдХреГрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд░рд▓ рдирд╣реАрдВ рд╣реИред рдРрд╕реЗ рд▓реЛрдЧ рд░рд╣реЗ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЛрдВрдиреЗ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЬреЗрд╕реНрдЯ рдХреЛ рд╡реЗрдмрдкреИрдХ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рдкреНрдд рдХрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЫреЛрдбрд╝рдХрд░ рд╣реИред

рдЗрд╕ SO рдЙрддреНрддрд░ рдореЗрдВ рд╡рд░реНрдгрд┐рдд babel-jest рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░ рдлрд╝рд╛рдЗрд▓ рдЪрд▓рд╛рдирд╛ рдЗрддрдирд╛ рдЦрд░рд╛рдм рд╣реИрдХ рдЬреИрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИред

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЧреНрд▓реЛрдмрд▓-рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рдЖрдкрдХреЛ рд╡реЗрдмрдкреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рд▓реЗрдХрд┐рди рдЬреЗрд╕реНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдк рд╡реЗрдмрдкреИрдХ рдкрд░ рднрд░реЛрд╕рд╛ рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ, рдХреЗрд╡рд▓ рдмреЗрдмреЗрд▓ред

рдХреНрдпрд╛ рдЗрд╕ рдЬрдЧрд╣ рдореЗрдВ рдХрд┐рд╕реА рдХреЗ рдкрд╛рд╕ рд╡рд┐рдЪрд╛рд░ рд╣реИрдВ?

рдореБрдЭреЗ рдЗрд╕реА рддрд░рд╣ рдХреА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝ рд░рд╣рд╛ рд╣реИред рдореИрдВ рдиреЗрдХреНрд╕реНрдЯрдЬ рдХреЗ рд▓рд┐рдП рдирдпрд╛ рд╣реВрдВ рдФрд░ рдореИрдВ "рдмрд╛рд╣рд░реА-рд╕реНрдХреЛрдкреНрдб-рд╕реАрдПрд╕рдПрд╕ рдХреЗ рд╕рд╛рде" рдЙрджрд╛рд╣рд░рдг рдХреЛ рдареАрдХ рд╕реЗ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ред рдХрднреА-рдХрднреА, рдореЗрд░реА рд╕реАрдПрд╕рдПрд╕ рд▓реЛрдб рд╣реЛ рдЬрд╛рддреА рд╣реИ рдФрд░ рдХрднреА-рдХрднреА рдирд╣реАрдВред рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдХрд┐ рдпрд╣ рд╡рд╣реА рдореБрджреНрджрд╛ рд╣реИ рдЬрд┐рд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЖрдк рдмрд╛рдд рдХрд░ рд░рд╣реЗ рд╣реИрдВред

https://github.com/zeit/next.js/issues/3276

рдЗрд╕ рд▓реЛрдбрд░ рдХреЗ рд╕рд╛рде рдмрд╛рд╣рд░реА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рдореБрджреНрджреЛрдВ рдХрд╛ рд╕рдорд╛рдзрд╛рди https://github.com/coox/styled-jsx-css-loader

@ilionic рдореИрдВрдиреЗ рдЖрдкрдХрд╛ рд╕рдорд╛рдзрд╛рди рдЬрд╛рдВрдЪ рд▓рд┐рдпрд╛ рд╣реИред рдпрд╣ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реИ! рд╢реБрдХреНрд░рд┐рдпрд╛ :)

@arefaslani рдореБрдЭреЗ рдирд╣реАрдВ рд▓рдЧрддрд╛ рдХрд┐ рдпрд╣ рдореБрджреНрджрд╛ рдмрдВрдж рд╣реЛ рдЧрдпрд╛ рд╣реИред

HTTP v1 рдХреЗ рд░реВрдк рдореЗрдВ рдпрд╣ рдЕрднреА рднреА рдмрд╣реБрдд рд╕рд╛рд░реЗ рд╕реАрдПрд╕рдПрд╕ рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рднрдпрд╛рдирдХ рдкреНрд░рджрд░реНрд╢рди рдХрд░ рд╣реИ, рдпрд╣ рдирд╛рдЯрдХреАрдп рд░реВрдк рд╕реЗ рдкрд╣рд▓реЗ рдЖрдХрд░реНрд╖рд┐рдд рдХрд░рдиреЗ рдХрд╛ рд╕рдордп рдмрдврд╝рд╛рддрд╛ рд╣реИред

рдЙрдЪрд┐рдд рдмрд╛рд╣рд░реА рд╢реИрд▓реА рд╕рдорд░реНрдерди CSS рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдЧрд╛ рдФрд░ рдЗрд╕рдХреЗ рдкрд░рд┐рдгрд╛рдорд╕реНрд╡рд░реВрдк a рдПрдХ рдЗрдирд▓рд╛рдЗрди рдирд╣реАрдВ