Next.js: CSS рдлрд╛рдЗрд▓реЛрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдирд╛?

рдХреЛ рдирд┐рд░реНрдорд┐рдд 27 рджрд┐рд╕ре░ 2016  ┬╖  102рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vercel/next.js

рдХрднреА-рдХрднреА рдЕрдкрдиреЗ CSS рдХреЛ рдПрдХ рдЕрд▓рдЧ .css рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рддреЛрдбрд╝рдирд╛ рдЕрдЪреНрдЫрд╛ рд╣реЛрддрд╛ рд╣реИред рдореИрдВрдиреЗ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИ:

pages/
тФФтФАтФА index
    тФЬтФАтФА index.css
    тФЬтФАтФА index.js
    тФФтФАтФА component.js

рдлрд┐рд░ index.js рдореЗрдВ, рдореИрдВрдиреЗ рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИ:

import css from './index.css'

рдФрд░ рдЕрдЧрд▓реЗ рдореЗрдВ .config.js:

module.exports = {
  webpack: function (config) {
    config.module.loaders = (config.module.loaders || []).concat({
      test: /\.css$/, loader: 'raw'
    })
    return config
  }
}

рд▓реЗрдХрд┐рди рджреБрд░реНрднрд╛рдЧреНрдп рд╕реЗ, рдпрд╣ рдореБрдЭреЗ рджреЗрддрд╛ рд░рд╣рддрд╛ рд╣реИ:

 ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

* ./index.css

рд▓рдЧрддрд╛ рд╣реИ рдЬреИрд╕реЗ рдХрд┐ рдпрд╣ рдХрд┐рд╕реА рдХрд╛рд░рдг рдХреЗ рд▓рд┐рдП рд╕рд╣реА рдЬрдЧрд╣ рдкрд░ рд╣рд▓ рдХрд░рдиреЗ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ, рд╕реНрдерд╛рдиреАрдп component.js рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ import component from './component.js' , рдирд╣реАрдВ рдпрдХреАрди рд╣реИ рдХрд┐ рдХреНрдпрд╛ рдпрд╣рд╛рдБ рдкрд░ рдЬрд╛ рд░рд╣рд╛ рд╣реИ рддреЛ рдореИрдВ рдХрд░ рд░рд╣рд╛ рд╣реВрдБред

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

рдпрд╣рд╛рдВ рдмреЗрдмрд▓-рдкреНрд▓рдЧрдЗрди-рдЗрдирд▓рд╛рдЗрди-рдЖрдпрд╛рдд рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХрд╛ рдПрдХ рд╕рд░рд▓ рд╕рдорд╛рдзрд╛рди рд╣реИ:

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ]
}

рдкреЗрдЬ / рдШрдЯрдХ

import "prismjs";

import { PrismCode } from "react-prism";
import prismGlobalStyles from "prismjs/themes/prism.css";

export default () => {
    return (
        <div>
            <style global jsx>
                {prismGlobalStyles}
            </style>
            <PrismCode className="language-javascript">
                {`function(noop) {
                    return noop;
                }`}
            </PrismCode>
            {/* ... */}
        </div>
    );
};

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

рдЖрдкрдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдпрд╣ рд╕рд░реНрд╡рд░ рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ?
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдЕрднреА рддрдХ рдЗрд╕рдХреЗ рд▓рд┐рдП рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реИред cc @arunoda

рдУрд╣ рдареАрдХ рд╣реИ, рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЕрдЧрд▓реЗ рдХрд╛рдо рдореЗрдВ webpack config рдХреЗ рд▓рд┐рдП рдПрдХ рд░рд╛рд╕реНрддрд╛ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рджреЛрдиреЛрдВ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рджреЛрдиреЛрдВ рдкрдХреНрд╖реЛрдВ рдкрд░ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПред

рдореБрдЭреЗ рдЗрд╕ рддрд░рд╣ рдХрд╛ рдПрдХ рдкреНрд░рдХрд╛рд░ рдХрд╛ рдмреЙрд▓рдкрд╛рд░реНрдХ рдорд┐рд▓ рдЧрдпрд╛ рд╣реИ рдЬрд┐рд╕рдореЗрдВ рдореИрдВ рд╕реАрдПрд╕рдПрд╕ рдпрд╛ рдПрд╕рдПрдПрд╕рдПрд╕ рдХреЗ рд╕рд╛рде рдЕрдЪреНрдЫрд╛ рдЦреЗрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдиреЗрдХреНрд╕реНрдЯ рдирд╣реАрдВ рдкрд╛ рд╕рдХрддрд╛ рд╣реВрдВред рдореЗрд░реЗ рдкрд╛рд╕ рдорд╛рдирдХ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХреЛрдВ рдХреЗ рд╕рд╛рде рдПрдХ components рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рд╣реИ рдЬрд┐рд╕рдореЗрдВ рдореИрдВ рдЕрдкрдиреЗ рдкреГрд╖реНрдареЛрдВ рдореЗрдВ рдЖрдпрд╛рдд рдХрд░рддрд╛ рд╣реВрдВ рд▓реЗрдХрд┐рди рдЬрдм рднреА рдореИрдВ SASS (рдпрд╛ CSS) рдлрд╝рд╛рдЗрд▓реЛрдВ рдореЗрдВ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░рддрд╛ рд╣реВрдВ рддреЛ рдореБрдЭреЗ рдПрдХ ~ "рдЖрдкрдХреЛ рдЗрд╕ рдлрд╝рд╛рдЗрд▓ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреБрдХреНрдд рд▓реЛрдбрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ" рддреНрд░реБрдЯрд┐ рд╕рдВрджреЗрд╢ рдЯрд╛рдЗрдк рдХрд░реЗрдВред

рдЖрдо рддреМрд░ рдкрд░ рд░рд┐рдПрдХреНрдЯ I рдореЗрдВ SASS рдлрд╛рдЗрд▓реЗрдВ рдЖрдпрд╛рдд рд╣реЛрддреА рд╣реИрдВ рдФрд░ рд╕реНрдЯрд╛рдЗрд▓, рд╕реАрдПрд╕рдПрд╕ рдФрд░ рд╕реИрд╕ рд▓реЛрдбрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╡реЗрдмрдкреИрдХ рд╕рдВрдХрд▓рди рд╣реЛрддрд╛ рд╣реИред рдореИрдВрдиреЗ рдЗрдиреНрд╣реЗрдВ next.config.js рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдЬреЛрдбрд╝рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд┐рдпрд╛ рд╣реИ (рдФрд░ NPM рдиреЗ рдЗрдиреНрд╣реЗрдВ рд╕реНрдерд╛рдкрд┐рдд рдХрд┐рдпрд╛ рд╣реИ) рд▓реЗрдХрд┐рди рдлрд┐рд░ рднреА рд╕рдорд╛рди рддреНрд░реБрдЯрд┐ рд╕рдВрджреЗрд╢ рдорд┐рд▓рддрд╛ рд╣реИред

рдореЗрд░реА next.config.js рдлрд╝рд╛рдЗрд▓:

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({ test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] });
    return config;
  }
}

рдХреНрд╖рдорд╛ рдХрд░реЗрдВ рдпрджрд┐ рдпреЗ рдкреНрд░рд╢реНрди рдЧреВрдВрдЧреЗ рд╣реИрдВ рдпрд╛ рдореИрдВрдиреЗ рдбреЙрдХреНрд╕ рдореЗрдВ рдХреБрдЫ рд╕реНрдкрд╖реНрдЯ рдпрд╛рдж рдХрд┐рдпрд╛ рд╣реИ рдЬреЛ рдЙрдирдХреЗ рдЙрддреНрддрд░ рджреЗрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЕрдЧрд░ рдХрд┐рд╕реА рдХреЗ рдкрд╛рд╕ рдПрдХ рдШрдЯрдХ рдпрд╛ рдкреГрд╖реНрда рдореЗрдВ SASS (рдпрд╛ рдХрдо рд╕реЗ рдХрдо CSS) рдЖрдпрд╛рдд рдХрд░рдиреЗ / рд╕рдВрдХрд▓рди рдХрд░рдиреЗ рдХрд╛ рдПрдХ рдХрд╛рд░реНрдпрд╢реАрд▓ рдЙрджрд╛рд╣рд░рдг рд╣реИред рдЬреЛ рдХреБрдЫ рднреА рдЙрдиреНрд╣реЗрдВ рд▓реЛрдб рдХрд░рдиреЗ / рд╕рдВрдХрд▓рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП next.config.js рдЬреЛрдбрд╝рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдореИрдВ рдЗрд╕рдХреА рдмрдбрд╝реЗ рдкреИрдорд╛рдиреЗ рдкрд░ рд╕рд░рд╛рд╣рдирд╛ рдХрд░реВрдВрдЧрд╛ред рдзрдиреНрдпрд╡рд╛рдж!

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

@spacedragon рдХреНрдпрд╛ рдЖрдкрдХреЗ рдкрд╛рд╕ рдПрдХ рдЙрджрд╛рд╣рд░рдг рд╣реИ рдХрд┐ Next.js рдХреЗ рд╕рд╛рде рд╕реАрдПрд╕рдПрд╕-рдореЙрдбреНрдпреВрд▓-рдЖрд╡рд╢реНрдпрдХрддрд╛-рд╣реБрдХ рдХреЛ рдХреИрд╕реЗ рдПрдХреАрдХреГрдд рдХрд┐рдпрд╛ рдЬрд╛рдП? рдореБрдЭреЗ рдХрд╛рдо рдХрд░рдиреЗ рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд░рд╣реА рд╣реИред

рдЕрдЧрд░ рдХреЛрдИ рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреБрдЫ рдкреНрд░рдХрд╛рд╢ рдбрд╛рд▓ рд╕рдХрддрд╛ рд╣реИ рдпрд╛ рд╕рд┐рд░реНрдл рдПрдХ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдЖрдпрд╛рдд рдХрд░рддрд╛ рд╣реИ, рддреЛ рдЗрд╕реЗ рд╕рдВрдХрд▓рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП SASS рдХреЛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд╕рд╛рде рдореБрдЭреЗ рдЕрднреА рднреА рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд░рд╣реА рд╣реИ рдЕрдЧрд▓рд╛ (рдПрдХ рдХреЛрдб рдЙрджрд╛рд╣рд░рдг рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ) рдЗрд╕рдХреА рд╕рд░рд╛рд╣рдирд╛ рдХреА рдЬрд╛рдПрдЧреАред

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

@MikeDigitize # 627 рдФрд░ # 638

рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╕рдВрднрд╡ рд╣реИ рдФрд░ рд╕рд░реНрд╡рд░ рд╕рд╛рдЗрдб рдкрд░ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд╕рдВрд╕рд╛рдзрд┐рдд рдХрд░рдирд╛ рдмрд╣реБрдд рдЖрд╕рд╛рди рд╣реИред

рд╕реАрдзреЗ рдиреЛрдб рдореЗрдВ:

require.extensions['.css'] = function(file) {
    console.log(file.id)
    return;
}

рдмреЗрдмрд▓ рд░рдЬрд┐рд╕реНрдЯрд░ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ:

// from https://babeljs.io/docs/core-packages/babel-register/
require("babel-register")({
  // Optional ignore regex - if any filenames **do** match this regex then they
  // aren't compiled.
  ignore: /regex/,

  // Ignore can also be specified as a function.
  ignore: function(filename) {
    if (filename === '/path/to/es6-file.js') {
      return false;
    } else {
      return true;
    }
  },

  // Optional only regex - if any filenames **don't** match this regex then they
  // aren't compiled
  only: /my_es6_folder/,

  // Setting this will remove the currently hooked extensions of .es6, `.es`, `.jsx`
  // and .js so you'll have to add them back if you want them to be used again.
  extensions: [".es6", ".es", ".jsx", ".js"]
});

рд╡реЗрдмрдкреИрдХ рд▓реЛрдбрд░ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ:

рдореИрдВ рд╡реНрдпрдХреНрддрд┐рдЧрдд рд░реВрдк рд╕реЗ isomorphic-style-loader рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдореБрдЭреЗ рд╕рд░реНрд╡рд░ рдкрд░ рд░реЗрдВрдбрд░ рдХрд░рддреЗ рд╕рдордп рдорд╣рддреНрд╡рдкреВрд░реНрдг CSS рдХреЛ рдЗрдирд▓рд╛рдЗрди рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред рд╣реЙрдЯ рд░реАрд▓реЛрдбрд┐рдВрдЧ рдФрд░ рдЕрдиреНрдп DX рд╕рдВрдмрдВрдзрд┐рдд рд╕рд╛рдорд╛рди рднреА рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдореИрдВ JS рдореЗрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ CSS рдХрд╛ рдкреНрд░рд╢рдВрд╕рдХ рдирд╣реАрдВ рд╣реВрдБ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ 3 рдкрд╛рд░реНрдЯреА рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рдЬрдЯрд┐рд▓ рд╣реИ рдФрд░ рдХрд┐рд╕реА рддрд░рд╣ рд╕реАрдПрд╕рдПрд╕ рд╕реЗ рд╕реА рд╣рдЯрд╛ рд▓реЗрддрд╛ рд╣реИред

@viktorbezdek рдХреНрдпрд╛ рдЖрдкрдиреЗ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ

@noeljackson рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдирд╣реАрдВ, рд▓реЗрдХрд┐рди рдореЗрд░рд╛ рдЗрд░рд╛рджрд╛ рд╣реИред Next.js рд╣реЛрдирд╣рд╛рд░ рд▓рдЧ рд░рд╣рд╛ рд╣реИ рдФрд░ рдореБрдЭреЗ рдмрд╣реБрдд рд╕рдордп рдмрдЪрд╛ рд╕рдХрддрд╛ рд╣реИ рдЕрдЧрд░ рдореИрдВ рдЗрд╕реЗ рдХрд╛рдо рдХрд░реВрдВред рдЕрдЧрд▓реЗ рдПрдХ рдпрд╛ рджреЛ рд╕рдкреНрддрд╛рд╣ рдореЗрдВ рдЗрд╕ рдкрд░ рдЧреМрд░ рдХрд░реЗрдВрдЧреЗ рдФрд░ рд╕рдлрд▓рддрд╛ рдорд┐рд▓рдиреЗ рдкрд░ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдкреНрд░рд╕реНрддреБрдд рдХрд░реЗрдВрдЧреЗред

@viktorbezdek рдореИрдВ рдЗрд╕ рдкрд░ рдПрдХ рдЗрдирд╛рдо

рдХреНрдпрд╛ рдЗрд╕рдХрд╛ рдХреЛрдИ рд╣рд▓ рд╣реИ? рдореИрдВ рдПрдХ рд╕рдорд╛рдзрд╛рди рджреЗрдЦрдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рддрд╛рдХрд┐ рдореБрдЭреЗ рд╡рд┐рд╢реНрд╡ рд╕реНрддрд░ рдкрд░ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рд╢рд╛рдорд┐рд▓ рди рдХрд░рдирд╛ рдкрдбрд╝реЗред

FWIW, рдореИрдВ рдЕрднреА /static рдлрд╝реЛрд▓реНрдбрд░ рдореЗрдВ рдЕрдкрдиреА CSS рдлрд╛рдЗрд▓реЗрдВ рдбрд╛рд▓ рд░рд╣рд╛ рд╣реВрдВред рдорд╣рд╛рди рдЙрдкрдирд┐рд╡реЗрд╢ рдирд╣реАрдВ, рд▓реЗрдХрд┐рди рдмрд╣реБрдд рдмрдбрд╝рд╛ рд╕реМрджрд╛ рднреА рдирд╣реАрдВред

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

@matthewmueller рдЖрдк рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ?

@viktorbezdek рдЗрд╕ рдкрд░ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж! рдЗрд╕ рдкреНрд░реЛрдЬреЗрдХреНрдЯ IMO рдХреЗ рд▓рд┐рдП CSS рдореЙрдбреНрдпреВрд▓ рд╕рдкреЛрд░реНрдЯ (рдпрд╛ рд╕рдорд╛рди) рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИред рд╕реНрдЯрд╛рдЗрд▓ рдЬреЗрдХреНрд╕, рд╕рд░рд▓ рд╕реНрдерд┐рддрд┐рдпреЛрдВ рдХреЗ рд▓рд┐рдП рдареАрдХ рд╣реИ рд▓реЗрдХрд┐рди рднрд╛рд░реА рд╕реНрдЯрд╛рдЗрд▓ рд╡рд╛рд▓реЗ рдШрдЯрдХреЛрдВ рдХреЗ рд▓рд┐рдП рдкрдврд╝рдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИред

рдХреНрдпрд╛ рдЗрд╕ рддрд░рд╣ рдПрдХ рдмрд╛рдмреЗрд▓ рдкреНрд▓рдЧрдЗрди рдПрдХ рд╡рд┐рдХрд▓реНрдк рд╣реЛрдЧрд╛ (рд╕рд░реНрд╡рд░ рд╕рд╛рдЗрдб рднреА)? https://github.com/gajus/babel-plugin-react-css-modules

рдореИрдВрдиреЗ рдЗрд╕реЗ рдХрд╛рдо рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд▓реЗрдХрд┐рди рдХреЛрдИ рдХрд┐рд╕реНрдордд рдирд╣реАрдВ: /

рдореБрдЭреЗ babel-plugin-css-modules-transform рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХрд╛ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдорд┐рд▓рд╛ред рдореЗрд░реЗ рдХрд╛рдВрдЯреЗ рдореЗрдВ рдореЗрд░рд╛ рд╣реИрдХреА рдЙрджрд╛рд╣рд░рдг рджреЗрдЦреЗрдВред

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

рдХреБрдЫ рд░рд┐рдПрдХреНрдЯ рдШрдЯрдХ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╕реНрдЯрд╛рдЗрд▓рд┐рдВрдЧ рдХреЛ рдЙрдЬрд╛рдЧрд░ рдХрд░рддреЗ рд╣реИрдВ рд╣рд╛рд▓рд╛рдВрдХрд┐ import рд╕реНрдерд┐рд░ рд╕рдВрд╕рд╛рдзрдиред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, https://github.com/react-component/slider рдХреА рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╢реИрд▓реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП:

import 'rc-slider/assets/index.css';

рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реИ рдХрд┐ рдЗрд╕ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЛ static/ рдбрд╛рдпрд░реЗрдХреНрдЯрд░реА рдореЗрдВ рдкреЗрд╕реНрдЯ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХреЗ, рд▓реЗрдХрд┐рди рдпрд╣ рднрд╡рд┐рд╖реНрдп рдХреЗ рдШрдЯрдХ рдЕрдкрдбреЗрдЯ рдкрд░ рдЕрдкрд╕реНрдЯреНрд░реАрдо рд╕реНрдЯрд╛рдЗрд▓ рдХреЗ рд╕рд╛рде рд╕рд┐рдВрдХ рдореЗрдВ рдирд╣реАрдВ рд░рд╣реЗрдЧрд╛, рдФрд░ рдпрд╣ рдореЗрд▓ рдирд╣реАрдВ рдЦрд╛рддрд╛ рдХрд┐ рдпрд╣ рдХрдВрдкреЛрдиреЗрдВрдЯ рдбреЙрдХреНрдпреВрдореЗрдВрдЯ рдХреНрдпрд╛ рд╕реБрдЭрд╛рддрд╛ рд╣реИред

рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдлрд╛рдЗрд▓реЗрдВ рд╡реИрд╢реНрд╡рд┐рдХ рдкреНрд░рднрд╛рд╡реЛрдВ рдХрд╛ рдкрд░рд┐рдЪрдп рджреЗрддреА рд╣реИрдВред рд╣рдореЗрдВ CSS рдХреЛ _capture_ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЗрд╕реЗ React рдЬреАрд╡рдирдЪрдХреНрд░ рдХреЗ рдЕрдВрджрд░ рд░рдЦрдирд╛ рдЪрд╛рд╣рд┐рдП, рддрд╛рдХрд┐ рдпрд╣ рдЕрдирдорд╛рдЙрдВрдЯ, рд╕рд░реНрд╡рд░-рд░реЗрдВрдбрд░ рдЖрджрд┐ рд╣реЛ рдЬрд╛рдПред

рдХрдИ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдРрд╕рд╛ рдХрд░рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдирд╣реАрдВ рд▓рдЧрддрд╛ рдХрд┐ рдпрд╣ рдПрдХ рдЕрдЪреНрдЫрд╛ рдкреИрдЯрд░реНрди рд╣реИред

рдореИрдВ Zeit рдиреЗрдХреНрд╕реНрдЯ рдЗрдВрдЯрд░реНрдирд▓ рд╕реЗ рдкрд░рд┐рдЪрд┐рдд рдирд╣реАрдВ рд╣реВрдБ, рд▓реЗрдХрд┐рди CSS рдХреЛ рд░рдЬрд┐рд╕реНрдЯрд░ / рдХреИрдкреНрдЪрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП import рдХреБрдЫ рд╕реНрдереИрддрд┐рдХ рд╡рд┐рд╢реНрд▓реЗрд╖рдг рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ?

рд╣рдо рдХрд░ рд╕рдХрддреЗ рдереЗ, рд▓реЗрдХрд┐рди рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрдЬреАрдм рд╣реЛрдЧрд╛ред рдХреБрдЫ рдРрд╕рд╛ рд╣реА рд╣реИ рдЬреЛ render() рдХреЗ рдмрд╛рд╣рд░ рдЬрд╛рджреБрдИ рд░реВрдк рд╕реЗ рдЕрдкрдиреЗ рдШрдЯрдХ рдЬреАрд╡рдирдЪрдХреНрд░ рдХреЗ рдЕрдВрджрд░ рд╕рдореНрдорд┐рд▓рд┐рдд рдХрд░рддрд╛ рд╣реИред

// рдореБрдЭреЗ рд▓рдЧрд╛ рдХрд┐ рдореИрдВ рдЗрд╕реЗ рдХрд┐рд╕реА рдФрд░ рдХреЗ рд▓рд┐рдП рд╕рд╛рдЭрд╛ рдХрд░реВрдВрдЧрд╛

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

(_Shudder_) gulp рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реБрдП, рдЗрд╕ gulpfile рдХреЗ рд╕рд╛рде (https://gist.github.com/auser/25e88e39d83413773c01f4c000ec2806) рд╕рднреА **/*.scss рдлрд╛рдЗрд▓реЗрдВ рдПрдХ рд╕рд╛рде рд╕рдореНтАНрдорд┐рд▓рд┐рдд рд╣реЛ рдЬрд╛рддреА рд╣реИрдВ рдФрд░ Styles рд╣реИрдВ, рдЬреЛ рдореБрдЭреЗ рдорд╛рдЙрдВрдЯ рд╣реЛ рдЬрд╛рддреА рд╣реИрдВред рдкреГрд╖реНрда рдХреЛ "рд╕рд╛рдорд╛рдиреНрдп" рддрддреНрд╡ рдХреЗ рд░реВрдк рдореЗрдВред

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

рд╣реИрдХ @ рд▓реЙрдХрд░ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдореИрдВ рд╣реВрдВ , рдмрд┐рдирд╛ рдХрд┐рд╕реА рднрд╛рдЧреНрдп рдХреЗ!

рд╕рдВрдкрд╛рджрд┐рдд рдХрд░реЗрдВ:
Btw, рдЖрдк gulpfile рдХреЗ рд▓рд┐рдП рдПрдХ sass рдкрд╛рд░реНрд╕рд░ рдЬреЛрдбрд╝рдиреЗ рдХреА рдЬрд░реВрд░рдд рд╣реИ!

рд╣рд╛рдВ рдФрд░ рдирд╣реАрдВ ... рдореИрдВ рд╕рд┐рд░реНрдл рдкреВрд░реНрд╡ рд╕рдВрдХрд▓рд┐рдд рд▓реЛрдЧреЛрдВ рд╕реЗ рд╢реБрджреНрдз рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЕрд▓рдЧ рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдХреЗ рд░реВрдк рдореЗрдВ .scss рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВред рдЪреВрдВрдХрд┐ рдкреЛрд╕реНрдЯрдХрд╕ ( precss ) рдХреЗ рд╕рд╛рде рдирдХрд▓ рдХрд░рддреЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рдирд╣реАрдВ рд╣реИред рдЕрдкрдиреЗ рдЖрдк рдХреЛ рдПрдХ sass parser рдХреЗ рд╕рд╛рде рд╕рдВрдкрд╛рджрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реНрд╡рддрдВрддреНрд░ рдорд╣рд╕реВрд╕ рдХрд░реЗрдВред

рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рд╣реИ, gssp рдХрд╛ рдЙрдкрдпреЛрдЧ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рд╕рдВрдХрд▓рд┐рдд рдХрд░рдирд╛ рдФрд░ рдЗрд╕реЗ рдЗрдирд▓рд╛рдЗрди рдмрдирд╛рдирд╛ рдпрд╛ рдпрд╣рд╛рдВ рддрдХ тАЛтАЛрдХрд┐ / рд╕реНрдереИрддрд┐рдХ рдореЗрдВ рднреА рдЕрдЧрд░ рдЖрдкрдХреЛ рдЧрд░реНрдо рдкреБрдирдГ рд▓реЛрдб рдХрд░рдиреЗ рдХрд╛ рдорди рдирд╣реАрдВ рд╣реИред

рдореБрдЭреЗ рд╕рд╛рдл рддрд░реАрдХреЗ рд╕реЗ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд + рдЧрд░реНрдо рдкреБрдирдГ рд▓реЛрдб рдорд┐рд▓рд╛ред рд╕реАрдПрд╕рдПрд╕ рдХреЛ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рд░реВрдк рдореЗрдВ рдЖрдпрд╛рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЗрд╕реЗ рдХрд┐рд╕реА рдЕрдиреНрдп рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреА рддрд░рд╣ рдкреГрд╖реНрда рдореЗрдВ рдЗрдирд▓рд╛рдЗрди рдХрд░ рд╕рдХрддрд╛ рд╣реИред рдХреГрдкрдпрд╛ рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдкрд░ рдПрдХ рдирдЬрд╝рд░ рдбрд╛рд▓реЗрдВ, рдореБрдЭреЗ рдкрд░реАрдХреНрд╖рдг рдХрд░рдиреЗ рдореЗрдВ рдорджрдж рдХрд░реЗрдВ рдФрд░ рдкреАрдЖрд░рдПрд╕ рдХрд╛ рд╕реНрд╡рд╛рдЧрдд рд╣реИ!

https://github.com/davibe/next.js-css-global-style-test

рдореЗрд░рд╛ рдорд╛рдирдирд╛ тАЛтАЛрд╣реИ рдХрд┐ рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдХреЛ рдЕрдЧрд▓реЗ.рдЬреЗрдПрд╕ рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ рдмрдирд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред рдХреНрдпрд╛ рдпрд╣? @rauchg @arunoda @nkzawa (рдХреНрд╖рдорд╛ рдХрд░реЗрдВ рдЕрдЧрд░ рдореИрдВрдиреЗ рдХрд┐рд╕реА рдХреЛ рдЯреИрдЧ рдХрд┐рдпрд╛ рд╣реИ рдЬреЛ рд╕реАрдзреЗ рдЗрд╕рдореЗрдВ рд╢рд╛рдорд┐рд▓ рдирд╣реАрдВ рд╣реИ)

@Davibe рдЖрдкрдХреЗ рдбреЗрдореЛ рдФрд░ рдмреЗрдмрд▓-рдкреНрд▓рдЧрдЗрди-рд░реИрдк-рдЗрди-рдЬреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж

рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдореИрдВ рдПрдХ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓, рдФрд░ рдПрдХ рдПрд╕рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рджреЗрдЦрддрд╛ рд╣реВрдВред рдХреНрдпрд╛ рдЖрдк рдЬрд╛рдирддреЗ рд╣реИрдВ рдХрд┐ рдХреНрдпрд╛ рдпрд╣ рдкреЛрд╕реНрдЯрдХреИрдВрд╕ рдФрд░ cssnext рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░реЗрдЧрд╛?

@ khrome83 рдореИрдВ рдирд╣реАрдВ рджреЗрдЦрддрд╛ рдХрд┐ рдХреНрдпреЛрдВ рдирд╣реАрдВ, рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕рдХреЗ рд╕рдорд╛рдпреЛрдЬрди рдХреА рдмрд╕ рдПрдХ рдмрд╛рдд рд╣реИред

@davibe рдореИрдВрдиреЗ рдкрд╛рдпрд╛ рдХрд┐ рдореИрдВ рдЖрдкрдХреЗ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдЕрдкрдиреЗ рдРрдк рдХреЛ рддреИрдирд╛рдд рдХрд░рдиреЗ рдореЗрдВ рдЕрд╕рдорд░реНрде рдерд╛ред рдмрд┐рд▓реНрдб .babelrc рдлрд╝рд╛рдЗрд▓ рдореЗрдВ next/babel рдкрдврд╝рдиреЗ рдореЗрдВ рдЕрд╕рдорд░реНрде рдерд╛ред рдореИрдВрдиреЗ рдПрдХ рдореБрджреНрджрд╛ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛, рд▓реЗрдХрд┐рди рдореИрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЖрд╢рд╛рдиреНрд╡рд┐рдд рд╣реВрдВ рдХрд┐ рдЗрд╕ рд╕рдм рд╕реЗ рдПрдХ рд╕рдорд╛рдзрд╛рди рдирд┐рдХрд▓рддрд╛ рд╣реИред рдореЗрдВ рдЖрд╕рд╛рдиреА рд▓рд╛рдкрддрд╛ import file.css рд╕реЗ create-react-app , рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдПрдХ рд╕рдорд╛рдзрд╛рди рдЖ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП :)

рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рд╕рдорд╛рдзрд╛рди рдЗрди рдкрдВрдХреНрддрд┐рдпреЛрдВ рдХреЗ рд╕рд╛рде рд╕рдВрднрд╡ рд╣реЛ:

https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969

рд╣рдо .css рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ (рдмрд╕ рдЗрд╕реЗ рдПрдХ рдореЙрдбреНрдпреВрд▓ рдореЗрдВ рдЯреНрд░рд╛рдВрд╕рдкреНрд▓рд╛рди рдХрд░рдиреЗ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЬреЛ рдПрдХ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдирд┐рд░реНрдпрд╛рдд рдХрд░рддрд╛ рд╣реИ) (рдФрд░ рдЗрд╕реА рддрд░рд╣ рд╣рдо .svg рд╕рдорд░реНрдерди рдХрд░рдХреЗ рдЗрд╕реЗ рд╢реБрджреНрдз рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХ рдореЗрдВ рдмрджрд▓ рд╕рдХрддреЗ рд╣реИрдВ)

рдФрд░ рдЗрд╕реА рддрд░рд╣ рд╣рдо рдПрдХ рд╢реБрджреНрдз рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХ рдореЗрдВ рдЯреНрд░рд╛рдВрд╕рдкреНрд▓рд╛рдиреНрдЯ рдХрд░рдХреЗ .svg рдХрд╛ рд╕рдорд░реНрдерди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ

рдпрд╣ рдПрдХ рдмрд╣реБрдд рд╣реА рд╕рд░рд▓ рдЯреНрд░рд┐рдХ рд╣реИред рдореИрдВ рдПрдХ рдореВрд▓ рдЙрджрд╛рд╣рд░рдг рджрд┐рдЦрд╛рдКрдВрдЧрд╛ рдХрд┐ рдХреИрд╕реЗ рдореИрдВрдиреЗ рдЗрд╕реЗ рдХрд┐рд╕реА рдЕрдиреНрдп рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ рд╕рдВрднрд╛рд▓рд╛ рд╣реИ =)

EDIT: https://github.com/zeit/next.js/pull/982 рджреЗрдЦреЗрдВ

@Davibe рдирдореВрдиреЗ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдореИрдВрдиреЗ https://github.com/moxystudio/next.js-style-loader рдмрдирд╛рдпрд╛ рд╣реИ, рдЬреЛ рдЕрдЧрд▓реЗ.рдЬреЗрдПрд╕ рдкрд░рд┐рдпреЛрдЬрдирд╛рдУрдВ рдореЗрдВ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреА рдЙрдореНрдореАрдж рдХреЛ рдЖрд╕рд╛рди рдХрд░реЗрдЧрд╛ред рдпрд╣ рд╡реЗрдмрдкреИрдХ рдХреЗ style-loader , рдЬрд┐рд╕рд╕реЗ рдпрд╣ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреА рдиреЗрд╡реАрдЧреЗрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЛ рдЬреЛрдбрд╝ / рд╣рдЯрд╛ рджреЗрдЧрд╛ред рдпрд╣ SSR рдХреЛ рднреА рд╕рдкреЛрд░реНрдЯ рдХрд░рддрд╛ рд╣реИред

рдпрд╣ css-loader (css рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕рд╛рде рдФрд░ рдмрд┐рдирд╛), postcss-loader , sass-loader рдФрд░ рд╕рдВрднрд╡рддрдГ рдЕрдиреНрдп рд▓реЛрдЧреЛрдВ рдХреЗ рд╕рд╛рде рдЕрдЪреНрдЫрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдЬрдм css-loader рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рддреЛ рдЗрд╕рдХреЗ url рд╡рд┐рдХрд▓реНрдк рдХреЛ false beucase рдХреЗ рдкрд╛рд╕ рд╕реЗрдЯ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред рдЪрд┐рддреНрд░, рдлрд╝реЙрдиреНрдЯ рдЖрджрд┐ рдХреЛ /static рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрд╣ рд╕рд╛рд░реА рдЬрд╛рдирдХрд╛рд░реА рдЖрдкрдХреЛ README рдореЗрдВ рдорд┐рд▓ рдЬрд╛рдПрдЧреАред

рдЖрдирдВрдж рд▓реЗрдВ рдФрд░ рдХреГрдкрдпрд╛ рдореБрдЭреЗ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рджреЗрдВ!

рд░реЗрдкреЛ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж! рдпрд╣ css рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдореИрдВ рдЦрд╛рдХрд╛ рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ рдФрд░ рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдЬреИрд╕реЗ рд╕реАрдПрд╕рдПрд╕ рд╕рд╣реА рдврдВрдЧ рд╕реЗ рд▓реЛрдб рд╣реЛ рд░рд╣рд╛ рд╣реИ! рд╣рд╛рд▓рд╛рдБрдХрд┐ @ рдлреЙрдиреНрдЯ-рдлреЗрд╕ рдирд┐рдпрдо рдЬрд┐рд╕рдореЗрдВ css рд╢рд╛рдорд┐рд▓ рд╣реИ рд╡рд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред :

-------------------- рд╕рдВрдкрд╛рджрд┐рдд ----------------------

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

@ рдкреЗрдиреНрд╕рд┐рд▓рдЪреЗрдХ рд╣рд╛рдБ, рдЖрдкрдХреЛ / рд╕реНрдерд┐рд░ рдХреА рдУрд░ рдЗрд╢рд╛рд░рд╛ рдХрд░рддреЗ рд╣реБрдП рд░рд╛рд╕реНрддреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рд╢рд╛рдпрдж рдореИрдВ README рдореЗрдВ рдЕрдзрд┐рдХ рд╕реНрдкрд╖реНрдЯ рдХрд░ рджреВрдВрдЧрд╛ред

рдХреНрдпрд╛ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдЬреИрд╕реЗ рдлреЛрдВрдЯ рдПрдЯрдо рдореЗрдВ рд╢рд╛рдорд┐рд▓ рд╕рд╛рдкреЗрдХреНрд╖ рдкрде рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреЛрдИ рднреА рд╕рдорд╛рдзрд╛рди рд╣реИ? рдпрд╛ рдореИрдВ рдмрд╕ рдкреВрд░реЗ рдлрд╝реЙрдиреНрдЯ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдХреЙрдкреА рдХрд░рдиреЗ рдФрд░ рдЗрд╕реЗ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реНрдерд┐рд░ рдлрд╝реЛрд▓реНрдбрд░ рдореЗрдВ рд╕реАрдПрд╕рдПрд╕ рдХрд░рдирд╛ рд╣реИ?

@ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЗрдВ рд╕реНрдЯреИрдЯрд┐рдХ рдХреЗ рдмрд╛рд╣рд░ рд░рд╣ рд╕рдХрддреА рд╣реИрдВред рдЖрдкрдХреА рдЫрд╡рд┐рдпрд╛рдВ рдФрд░ рдлрд╝реЙрдиреНрдЯ рд╕реНрдерд┐рд░ рд╣реЛрдиреЗ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЖрдк рдЙрдиреНрд╣реЗрдВ /static/file рд╕рд╛рде рд╕рдВрджрд░реНрднрд┐рдд рдХрд░рддреЗ рд╣реИрдВред

рдореИрдВ рд╕рдордЭ рдЧрдпрд╛ред рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореИрдВ рдмреНрд▓реВрдкреНрд░рд┐рдВрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рдЬреЛ рдХрд┐ рдПрдХ рдПрдирдкреАрдПрдо рдкреИрдХреЗрдЬ рд╣реИ, рдореИрдВ рдиреЛрдб_рдореЙрдбреНрдпреВрд╕ рдХреЗ рдЕрдВрджрд░ рдХрд┐рд╕реА рднреА рдлрд╛рдЗрд▓ рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реЛрдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ред

@ рдкреЗрдВрд╕рд┐рд▓рдиреИрдЪ рджреБрд░реНрднрд╛рдЧреНрдп рд╕реЗ рд╕рдВрднрд╡ рдирд╣реАрдВ рд╣реИред рдЕрдЧрд▓реА.js рдмрд╣реБрдд рд╕рдЦреНрдд рд╣реИ рдХрд┐ рдпрд╣ рдЫрд╡рд┐рдпреЛрдВ рдФрд░ рдЕрдиреНрдп рдкрд░рд┐рд╕рдВрдкрддреНрддрд┐рдпреЛрдВ рдХреЛ рдХреИрд╕реЗ рд╕рдВрднрд╛рд▓рддреА рд╣реИред рдЗрд╕ рд╡рд╛рд░реНрддрд╛рд▓рд╛рдк рдХреЛ рдкреНрд░рджреВрд╖рд┐рдд рди рд╣реЛрдиреЗ рджреЗрдВ рдФрд░ рдпрджрд┐ рд╣реЛ рд╕рдХреЗ рддреЛ рдЕрдЧрд▓реА рд╢реИрд▓реА рдХреЗ рд▓реЛрдбрд░ рд░реЗрдкреЛ рдореЗрдВ рдПрдХ рд╕рдорд╕реНрдпрд╛ рдкреИрджрд╛ рдХрд░реЗрдВред

@tgoldenberg рдЖрдк рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдмреЗрд╣рддрд░ рд╡рд░реНрдгрди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдпрд╛ рдореБрдЭреЗ рдмрддрд╛ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдХреИрд╕реЗ рдкреБрди: рдкреЗрд╢ рдХрд░реЗрдВ? рдХреГрдкрдпрд╛ рдореЗрд░реЗ рднрдВрдбрд╛рд░ рдХреЛ рджреЗрдЦреЗрдВред рдореЗрд░реЗ рд▓рд┐рдП рд╡рд╣рд╛рдВ рдХреЗ рдореБрджреНрджреЛрдВ рдХреЛ рдЯреНрд░реИрдХ рдХрд░рдирд╛ рдЖрд╕рд╛рди рд╣реИред

@davibe , рдпрд╣ yarn over npm install рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рд╕рдорд╕реНрдпрд╛ рдмрдирдХрд░ рд╕рдорд╛рдкреНрдд рд╣реЛ рдЧрдпрд╛ред рдпрд╛рд░реНрди рдХреБрдЫ рдЕрдХрдердиреАрдп рддреНрд░реБрдЯрд┐рдпреЛрдВ рдХреЛ рдлреЗрдВрдХ рд░рд╣рд╛ рдерд╛, рд▓реЗрдХрд┐рди рдПрдХ рдмрд╛рд░ рдЬрдм рдореИрдВрдиреЗ рдЗрд╕реЗ рд╣рдЯрд╛ рджрд┐рдпрд╛ рддреЛ рдЙрджрд╛рд╣рд░рдг рдиреЗ рдЙрддреНрдкрд╛рджрди рдореЗрдВ рдареАрдХ рдХрд╛рдо рдХрд┐рдпрд╛ред

рдореИрдВрдиреЗ рдЗрд╕реЗ рд╕реНрдерд╛рдкрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд┐рд░реНрдл 4 рдШрдВрдЯреЗ рдмрд┐рддрд╛рдП рдФрд░ рд╕реЛрдЪрд╛ рдХрд┐ рдХреБрдЫ рд╕рдордп рдмрдЪрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рд╕реА рдХреА рднреА рджрд┐рд▓рдЪрд╕реНрдкреА рд╣реЛ рд╕рдХрддреА рд╣реИред рдпрд╣ рдкрд░рд┐рд╡рд░реНрддрди рдкрд░ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рддрд╛ рд╣реИ (рдЬреИрд╕реЗ рд╡рд░реНрддрдорд╛рди рдЙрджрд╛рд╣рд░рдг рдореЗрдВ), PostCSS рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ CSS рдЪрд▓рд╛рддрд╛ рд╣реИ рдФрд░ рдЖрдкрдХреЛ css-loader рд╕реЗ рд╕реНрдерд╛рдиреАрдп рдореЙрдбреНрдпреВрд▓ рдирд╛рдо рджреЗрддрд╛ рд╣реИред рдЙрддреНрддрд░рд╛рд░реНрджреНрдз рдХреА рдХрдореА "рд╡реИрд╢реНрд╡рд┐рдХ рд╕реАрдПрд╕рдПрд╕" / "рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд" рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреА рд╡рд░реНрддрдорд╛рди рд╕реНрдерд┐рддрд┐ рдореЗрдВ рдореЗрд░реЗ рд▓рд┐рдП рдкреНрд░рдореБрдЦ рд╕реМрджрд╛ рдмреНрд░реЗрдХрд░ рдереЗред

component.js

import React from 'react';
import stylesheet from './styles.css';

const [css, className] = stylesheet;
const Component = () => (
    <p className={className.paragraph}>
        <Head><style dangerouslySetInnerHTML={{__html: css}} /></Head>
        bazinga
    </p>
);

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        ["wrap-in-js", {
            "extensions": ["css$"]
        }]
    ]
}

next.config.js
exports-loader рд╕рд╛рде рдЕрджреНрднреБрдд рд╣реИрдХ рдХреЛ рдиреЛрдЯрд┐рд╕ рдХрд░реЗрдВред рд╡рд╣рд╛рдБ рдПрдХ рдмреЗрд╣рддрд░ рддрд░реАрдХрд╛ рд╣реЛ рдЧрдпрд╛ рд╣реИ, рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ ???

module.exports = {
    webpack: (config) => {
        config.module.rules.push(
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'emit-file-loader',
                        options: {
                            name: 'dist/[path][name].[ext]'
                        }
                    },
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'val-loader'
                    },
                    {
                        loader: 'exports-loader',
                        options: {
                            0: 'exports[0][1]',
                            1: 'exports.locals'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        );

        return config;
    }
};

рдореИрдВ рдЦреБрдж рдПрдХ рд╕рдорд╛рдзрд╛рди рдХреЗ рд╕рд╛рде рдЖрдпрд╛ рдерд╛, рдЬреЛ рдХрд┐ @satazor рдзрд╛рдЧреЗ рдореЗрдВ рдЙрдЪреНрдЪрддрд░ рдкреЛрд╕реНрдЯ рдХрд┐рдП рдЬрд╛рдиреЗ рдХреЗ рд╕рдорд╛рди рд╣реИ: https://github.com/jozanza/next-css-json-loaderред

рдмрд╕ рдХреБрдЫ рдкрдВрдХреНрддрд┐рдпреЛрдВ рдХреЛ рдЕрдкрдиреЗ next.config.js :

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      loader: 'emit-file-loader',
      options: {
        name: 'dist/[path][name].[ext]',
      }
    }, {
      test: /\.css$/,
      loader: 'babel-loader!next-css-json-loader',
    });
    return config;
  },
};

рд╢реИрд▓рд┐рдпрд╛рдБ js рд╡рд╕реНрддреБрдУрдВ рдХреЗ рд░реВрдк рдореЗрдВ рдЖрдпрд╛рдд рдХреА рдЬрд╛рддреА рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП glamor рдФрд░ рдЗрд╕реА рддрд░рд╣ рдХреЗ рд╕рдорд╛рдзрд╛рди рдХреЗ рд╕рд╛рде рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдмрд╣реБрдд рдЖрд╕рд╛рди рд╣реИ:

// .css files now conveniently expose all styles as js objects
import styles from 'some-package/styles.css';
import { css } from 'glamor';
// ...
<div {...css(styles)}>
  this is a nice box. 
</div>

рдЪреАрдпрд░реНрд╕! ЁЯН╗ :)

рдХреНрдпрд╛ рд╕реНрдЯреНрд░рд┐рдВрдЧреНрд╕ рдХреЗ рд░реВрдк рдореЗрдВ рдорд╛рд░реНрдХрдбрд╛рдЙрди рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдХрд╛рдо рдХрд░рдиреЗ рдХрд╛ рдПрдХ рддрд░реАрдХрд╛ рд╣реИ? рдореИрдВ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рд░реЙ-рд▓реЛрдбрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдЬреИрд╕рд╛ рдХрд┐ рдпрд╣ рдПрдХ рд╡реЗрдмрдкреИрдХ рдкреНрд▓рдЧрдЗрди рд╣реИ рдпрд╣ рд╕рд░реНрд╡рд░ рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред

@kristojorg

рдореИрдВ рд╕рд┐рд░реНрдл markdown рдЖрдпрд╛рдд рдХреЗ рд▓рд┐рдП рдПрдХ babel рдкреНрд▓рдЧрдЗрди рд▓рд┐рдЦрд╛ рд╣реИред рдореЗрд░реЗ рдореЛрдмрд╛рдЗрд▓ рдкрд░ рдЕрднреА, рд▓реЗрдХрд┐рди рдЕрдЧрд░ рдЖрдк рдореЗрд░реЗ GitHub рджреЗрдЦрддреЗ рд╣реИрдВ рддреЛ рдЖрдк рдЗрд╕реЗ рджреЗрдЦреЗрдВрдЧреЗред

@ khrome83 рдЬреЛ рднрдпрд╛рдирдХ рд▓рдЧрддрд╛ рд╣реИред рдЗрд╕реЗ рдЖрдЬрдорд╛рдиреЗ рдХреЗ рд▓рд┐рдП рддрддреНрдкрд░ рд╣реИрдВ

рдзрдиреНрдпрд╡рд╛рдж @ khrome83! рдореИрдВ рдЗрд╕реЗ рдПрдХ рд╢реЙрдЯ рджреВрдБрдЧрд╛

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

'File.md' рд╕реЗ рдлрд╝рд╛рдЗрд▓ рдЖрдпрд╛рдд рдХрд░реЗрдВ;

рдореБрдЭреЗ рдпрд╣ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдорд┐рд▓рд╛, рдзрдиреНрдпрд╡рд╛рдж !! рдмрд╣реБрдд рдорджрджрдЧрд╛рд░

рдпрд╣ рдЕрдкрдорд╛рдирдЬрдирдХ рд╣реИ, рд▓реЗрдХрд┐рди рдЬрдм рд╕реЗ рдпрд╣ рдореБрджреНрджрд╛ рдмрдВрдж рд╣реБрдЖ рд╣реИ, рдореИрдВ рд╕реНрд╡рддрдВрддреНрд░ рдорд╣рд╕реВрд╕ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ :)

рдорд╛рд░реНрдХрдбрд╛рдЙрди рдХреЗ рд▓рд┐рдП 2 рдЪреАрдЬреЗрдВ рд╣реИрдВ рдЬреЛ рдЖрдк рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

(1)
рдПрдХ рдорд╛рд░реНрдХрдбрд╛рдЙрди рдлрд╝рд╛рдЗрд▓ рдХреЛ рдПрдХ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рд░реВрдк рдореЗрдВ рд╢рд╛рдорд┐рд▓ рдХрд░рдирд╛ рд╣реИ рдФрд░ рдлрд┐рд░ рдЗрд╕реЗ html рдореЗрдВ рдЕрдиреБрд╡рд╛рдж рдХрд░рдирд╛ рд╣реИ / рд░рдирдЯрд╛рдЗрдо рдкрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХрд░рдирд╛ рд╣реИред рдЖрдк рдЬреЗрдиреЗрд░рд┐рдХ wrap-in-js babel рд▓реЛрдбрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдЗрд╕реЗ рдорд╛рд░реНрдХрдбрд╛рдЙрди рдлрд╛рдЗрд▓ рдПрдХреНрд╕рдЯреЗрдВрд╢рди рдХреЗ рд▓рд┐рдП рд░рдЬрд┐рд╕реНрдЯрд░ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдЬреИрд╕реЗ рдХрд┐ рдЗрд╕реЗ рдЕрдЧрд▓реЗ.рдЬреИрд╕реЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ examples/with-globa-stylesheet/.babelrc css рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

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

рдпрджрд┐ рдЖрдк рдЪреБрдирддреЗ рд╣реИрдВ (2) рдпрд╣ рднреА рдЬрд╛рдирддреЗ рд╣реИрдВ рдХрд┐ рдорд╛рд░реНрдХрдбрд╛рдЙрди-рдЗрди-рдЬреЗрдПрд╕ рд╕рд┐рдВрдЯреИрдХреНрд╕ рдХреЗ рд▓рд┐рдП рд╕рд┐рдВрдЯреИрдХреНрд╕ рд╣рд┐рд▓рд▓рд╛рдЗрдЯ рдкреНрд░рджрд╛рди рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рдПрдХ рдкрд░рдорд╛рдгреБ рдкреНрд▓рдЧрдЗрди рд╣реИ рдФрд░ рдЗрд╕реЗ language-markdown-in-js рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ

@davibe рдЯрд┐рдк рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж! рдореИрдВ рдЗрд╕рдХреЗ рдмрдЬрд╛рдп рдирд┐рд░реНрдорд╛рдг рд╕рдордп рдХреЗ рд░реВрдк рдореЗрдВ рдкрд╛рд░реНрд╕ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдХреЗрд╡рд▓ рдПрдХ рд╕рдорд╕реНрдпрд╛ рдЬреЛ рдореБрдЭреЗ рдорд╛рд░реНрдХрдбрд╛рдЙрди-рдЗрди-рдЬреЗрдПрд╕ рдХреЗ рд╕рд╛рде рд╣реИ, рдХрдореНрдкреЛрдЬрд┐рдВрдЧ рдХрд░рддреЗ рд╕рдордп рдмреИрдХрдЯрд┐рдХреНрд╕ рд╕реЗ рдмрдЪ рд░рд╣реА рд╣реИ :( рд╢рд╛рдпрдж рдореБрдЭреЗ рдмреИрдмрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рд░реВрдк рдореЗрдВ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рдиреА рдЪрд╛рд╣рд┐рдП рдФрд░ рдлрд┐рд░ рдорд╛рд░реНрдХрдбрд╛рдЙрди-рдЗрди рдореЗрдВ рдлреАрдб рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред ?

@kristojorg

рд╡рд╣рд╛рдБ рдЙрд╕рдХреЗ markdown renders рд╣реИрдВред рдореЗрд░реЗ рдкреНрд▓рдЧрдЗрди рд▓рд┐рдЦрдиреЗ рдХрд╛ рдХрд╛рд░рдг рд╡рд╣реА рдерд╛ред рдореИрдВ рдорд╛рд░реНрдХрдбрд╛рдЙрди рдХреЛ рдПрдХ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рд░реВрдк рдореЗрдВ рдЦреАрдВрдЪрддрд╛ рд╣реВрдВ, рдлрд┐рд░ рдореИрдВ рдЗрд╕реЗ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рдорд╛рд░реНрдХрдбрд╛рдЙрди рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЪрд▓рд╛рддрд╛ рд╣реВрдВред рдпрд╣ рддреЗрдЬреА рд╕реЗ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ рд╕рднреА рд╕реВрдЪрд┐рдпреЛрдВ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реВрдЪреА рдШрдЯрдХ рдХреА рддрд░рд╣ рдорд╛рд░реНрдХрдбрд╛рдЙрди рд░реЗрдВрдбрд░ рдЯреБрдХрдбрд╝реЛрдВ рдХрд╛ рдкреНрд░рддрд┐рдирд┐рдзрд┐рддреНрд╡ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХреЛрдВ рдореЗрдВ рдкрд╛рд░рд┐рдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рд╕реНрдЯрд╛рдЗрд▓рд┐рд╢ JSX рдХреЗ рд╕рд╛рде рдЕрдЪреНрдЫрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдХреНрдпрд╛ рдЗрд╕ рдкрд░ рдХреЛрдИ рдЕрдкрдбреЗрдЯ рд╣реИ? рдЙрдкрд░реЛрдХреНрдд рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ, рдореИрдВ рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ рдЕрднреА рднреА рдХреЛрдИ рд╕рд╣реА рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реИред
@arunoda
рдХреНрдпрд╛ рдЖрдЗрд╕реЛрдореЙрд░реНрдлрд┐рдХ-рд╕реНрдЯрд╛рдЗрд▓-рд▓реЛрдбрд░ - https://www.npmjs.com/package/isomorphic-style-loader рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдЙрджрд╛рд╣рд░рдг рджреЗрдирд╛ рд╕рдВрднрд╡ рд╣реИ

рдпреЗ рдмрд┐рд▓реНрдХреБрд▓ рд╕рд╣реА рд╣реЛрдЧрд╛!

Npm рдкреИрдХреЗрдЬ рд╕реЗ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХ рдЖрдпрд╛рдд рдХрд░рддреЗ рд╕рдордп рдХрд┐рд╕реА рдХреЗ рдкрд╛рд╕ рдХреЛрдИ рд╕рдорд╛рдзрд╛рди рд╣реЛрддрд╛ рд╣реИ рдЬреЛ рдмрджрд▓реЗ рдореЗрдВ .css рдпрд╛ .scs рдлрд╝рд╛рдЗрд▓ рдЖрдпрд╛рдд рдХрд░рддрд╛ рд╣реИ? рдЗрд╕рд▓рд┐рдП рдореВрд▓ рд░реВрдк рд╕реЗ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЯреНрд░рд╛рдВрд╕рдкреНрд▓рд┐рдВрдЧ рдХрд░рдирд╛ рдЬреЛ рдиреЛрдб_рдореЙрдбреНрдпреВрд▓реНрд╕ рд╕реЗ рдЖрдпрд╛рдд рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВ

рдореИрдВ рдХреБрдЫ рд╣рдлреНрддреЛрдВ рдХреЗ рд▓рд┐рдП Create-React-App (CRA) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдЖрдЬ рдореИрдВ Next.js рдкрд░ рдЖрдпрд╛ рд╣реВрдВ рдФрд░ рдореИрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЙрддреНрд╕рд╛рд╣рд┐рдд рд╣реВрдВ рдХреНрдпреЛрдВрдХрд┐ CRA рд╡рд░реНрддрдорд╛рди рдореЗрдВ рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рд░реЗрдВрдбрд░рд┐рдВрдЧ (SSR) рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рдЬреЛ рдХрд┐ рдПрдХ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рд╢рд░реНрдо рдХреА рдмрд╛рдд рд╣реИред
рдореБрдЭреЗ рдЗрд╕рдХреЗ SSR рдмреЙрдХреНрд╕ рд╕реЗ рдмрд╛рд╣рд░ рдХреЗ рд▓рд┐рдП Next.js рдкрд░ рд╕реНрд╡рд┐рдЪ рдХрд░рдирд╛ рдкрд╕рдВрдж рд╣реИ рд▓реЗрдХрд┐рди .scss рдЖрдпрд╛рдд рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реЛрдиреЗ рдХреЗ рдХрд╛рд░рдг рдореБрдЭреЗ рд╡рд╛рдкрд╕ рдкрдХрдбрд╝ рд░рд╣рд╛ рд╣реИред
рдХреНрдпрд╛ рдХрд┐рд╕реА рдХреЛ рд╡реЗрдмрдкреИрдХ рдХреЙрдиреНрдлрд┐рдЧрд░реЗрд╢рди рдореЗрдВ SASS рд▓реЛрдбрд░ рдЬреЛрдбрд╝рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рдорд┐рд▓рд╛ рд╣реИ?

Cr101 рд╕реЗ рд╕рд╣рдордд, CSS / SASS рдХреЗ рд▓рд┐рдП рд╕рдорд░реНрдерди рдирд╣реАрдВ рд╣реЛрдиреЗ рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдореБрдЭреЗ рд╕реАрдПрд╕рдПрд╕ рдлреНрд░реЗрдорд╡рд░реНрдХ рдХреЛ рдиреАрдВрд╡ рдХреА рддрд░рд╣ рдлреЗрдВрдХрдирд╛ рд╣реЛрдЧрд╛ рдЬреЛ рдореЗрд░реЗ рд▓рд┐рдП рдХреЛрдИ рд╡рд┐рдХрд▓реНрдк рдирд╣реАрдВ рд╣реИред

рдореИрдВ @davibe рджреНрд╡рд╛рд░рд╛ рдкреНрд░рджрд╛рди рдХрд┐рдП рдЧрдП рд░реЗрдкреЛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рдерд╛, рд▓реЗрдХрд┐рди рд╡рд╣ рдЕрдм рдЗрд╕реЗ рдмрдирд╛рдП рдирд╣реАрдВ рд░рдЦ рд░рд╣рд╛ рд╣реИ, рдФрд░ рдирд╡реАрдирддрдо рд╕рдорд╛рдзрд╛рди рдЙрд╕рдХреЗ рдкрд╛рд╕ рд╣реИ ред

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

@Yuripetusko @ cr101 @tgoldenberg рдмрд┐рд▓реНрдХреБрд▓ рд╕рд╣рдордд рд╣реИрдВред рдореИрдВ рдИрдорд╛рдирджрд╛рд░реА рд╕реЗ рд╕реЛрдЪрддрд╛ рд╣реВрдВ рдХрд┐ рдмреЙрдХреНрд╕ рдХреЗ рдмрд╛рд╣рд░ рдХрд╛рдо рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рдЕрдЧрд▓рд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рднрдпрд╛рдирдХ рд╣реИред рд╕рдм рдХреБрдЫ рдареАрдХ рд╣реИ рдпрд╣рд╛рдВ рддрдХ тАЛтАЛрдХрд┐ рд╣рд╛рд░реНрдб-рдХреЛрдбреЗрдб рд╕рдВрд░рдЪрдирд╛ (рдЬреИрд╕реЗ рдЕрдирд┐рд╡рд╛рд░реНрдп /pages рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛, /static рдЖрджрд┐)ред рд▓реЗрдХрд┐рди рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЕрд╕рдорд░реНрдерд┐рдд scss рдореЙрдбреНрдпреВрд▓ рд╣рдорд╛рд░реЗ рд▓рд┐рдП рдкреВрд░реА рдЪреАрдЬ рдХреЛ рддреЛрдбрд╝рддреЗ рд╣реИрдВред рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдПрдХ рдмрд╣реБрдд рд╣реА рдЬрдЯрд┐рд▓ scss рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рдмреНрд░реЗрдХрдкреЙрдЗрдВрдЯ рдФрд░ рдкрд╣рд▓реВ рдЕрдиреБрдкрд╛рдд рдХреЗ рд╕рд╛рде рд╕рдм рдХреБрдЫ рдХрд╛ рдкреБрдирд░реНрдЧрдгрдирд╛ рд╣реИред рд╣рдордиреЗ рдЕрдкрдиреА рд╕рдВрд░рдЪрдирд╛ рдХреЛ рдЗрддрдирд╛ рд╕рд╣реА рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд рдореЗрд╣рдирдд рдХреАред рдЕрдЧрд▓рд╛ рдорд╣рд╛рди рдпрд╣ рд╣реИ рдХрд┐ рд╣рдо рдЕрднреА рд╕рднреА scss рд╕рд╛рдорд╛рди рдХреЛ рдлреЗрдВрдХ рдирд╣реАрдВ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рд╣реИред рдЕрд╕рдорд░реНрдерд┐рдд scss рдПрдХрдорд╛рддреНрд░ рд▓реЗрдХрд┐рди рд╕рдмрд╕реЗ рдорд╣рддреНрд╡рдкреВрд░реНрдг рдмрд╛рдд рд╣реИ рдЬреЛ рд╣рдореЗрдВ рдЗрд╕ рдЦреВрдмрд╕реВрд░рдд рдЯреВрд▓ рдХреЗ рдкреНрд░рд╡рд╛рд╕ рд╕реЗ рд░реЛрдХрддреА рд╣реИред

рджрд░рдЕрд╕рд▓, # 1615 - рдХреБрдЫ рдХрд╛рд░реНрд░рд╡рд╛рдИ рдЪрд▓ рд░рд╣реА рд╣реИред @timmywil рд╕реЗрдЯрдЕрдк рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реИ isomorphic-style-loader рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП next ред рд░реБрдЪрд┐ рд░рдЦрдиреЗ рд╡рд╛рд▓реЗ рд╕рднреА рд▓реЛрдЧреЛрдВ рдХрд╛ рд╢рд╛рдорд┐рд▓ рд╣реЛрдиреЗ рдФрд░ рднрд╛рдЧ рд▓реЗрдиреЗ рдХреЗ рд▓рд┐рдП рд╕реНрд╡рд╛рдЧрдд рд╣реИред

рдореИрдВрдиреЗ рд╣рд░ рд╕рдорд╛рдзрд╛рди рдХреА рдХреЛрд╢рд┐рд╢ рдХреА, рдЬреЛ рдЗрд╕ рд╕реВрддреНрд░ рдХреА рдУрд░ рдЗрд╢рд╛рд░рд╛ рдХрд░рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдБрдХрд┐ рдЙрдирдореЗрдВ рд╕реЗ рдХреЛрдИ рднреА рдХрд╛рдо рдХрд░ рд╕рдХрддрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП рдореИрдВрдиреЗ рдЕрдкрдирд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░рдиреЗ рдХрд╛ рдирд┐рд░реНрдгрдп рд▓рд┐рдпрд╛ рдФрд░ рдореИрдВрдиреЗ рдЗрд╕реЗ рдпрд╣рд╛рдБ рдкреНрд░рд▓реЗрдЦрд┐рдд рдХрд┐рдпрд╛

@almeynman рдзрдиреНрдпрд╡рд╛рдж! рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдЖрдкрдХреЗ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреЛ рджреЗрдЦрдиреЗ рдЬрд╛ рд░рд╣рд╛ рд╣реИ!
рд╡реИрд╕реЗ, рдореИрдВ рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдХрд╛ рдЕрдиреБрд╕рд░рдг рдХрд░рдХреЗ scss рдореЙрдбреНрдпреВрд▓ рдмрдирд╛рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛ рд╣реВрдВред рдореИрдВрдиреЗ рдЬреЛ рдХреБрдЫ рднреА рдХрд┐рдпрд╛ рд╣реИ рд╡рд╣ sass-loader рдФрд░ рд╕рдХреНрд╖рдо sourcemaps рдЬреЛрдбрд╝рд╛ рдЧрдпрд╛ рд╣реИред

рдореИрдВ рдЗрд╕ рддрд░рд╣ рд╕реЗ next.js suport CSS (рдпрд╣рд╛рдВ рддрдХ тАЛтАЛрдХрд┐ SCSS) рдмрдирд╛рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛ред

рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, next.config.js , рджрд┐рдП рдЧрдП рд▓реЛрдбрд░ рдФрд░ DefintPlugin рдЙрджрд╛рд╣рд░рдг рдЬреЛрдбрд╝рдХрд░ рд╡реЗрдмрдкреИрдХ рдХреЛ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд░реЗрдВред

const webpack = require('webpack');

module.exports = {
  webpack: (config, {dev}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      exclude: /node_modules/,
    });

    config.plugins.push(
      new webpack.DefinePlugin({
        "process.env": {
          // flag to indicate this is for browser-side
          BROWSER: JSON.stringify(true),
       }
      })
    );

    return config;
  }
};

рдлрд┐рд░, рдШрдЯрдХ рдХреЛрдб рдореЗрдВ, рд╢рд░реНрдд рдХреЗ рд╕рд╛рде рд╕реНрдЯрд╛рдЗрд▓ рдлрд╝рд╛рдЗрд▓ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдХреЗрд╡рд▓ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рд╕рд╛рдЗрдб рдмрдВрдбрд▓рд┐рдВрдЧ рдореЗрдВ рд╕реНрдЯрд╛рдЗрд▓ рдореЙрдбреНрдпреВрд▓ рд╣реЛрдЧрд╛ред

if (process.env.BROWSER) {
  require("./style.scss");
}

рдЕрдЧрд░ рдЖрдкрдХреЛ if (process.env.BROWSER) рдорди рдирд╣реАрдВ рд╣реИ, рддреЛ рдпрд╣ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдПрдХ рдЕрдЪреНрдЫрд╛ рддрд░реАрдХрд╛ рдпрд╣рд╛рдБ рд╣реИ

@almeynman IMO рдпрд╣ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рддрд░реАрдХрд╛ рдирд╣реАрдВ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдЖрдк рдЙрд╕ рдкреГрд╖реНрда рд╕реЗ рд╕рдВрдмрдВрдзрд┐рдд CSS рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрдЬрд╛рдп рдкреНрд░рддреНрдпреЗрдХ рдкреГрд╖реНрда рдкрд░ рдкреВрд░реА рд╡реЗрдмрд╕рд╛рдЗрдЯ рдХреЗ рд▓рд┐рдП CSS рдХреЛрдб рд▓реЛрдб рдХрд░ рд░рд╣реЗ рд╣реИрдВред
рдХреЗрд╡рд▓ рд╕рдВрдкреВрд░реНрдг рд╡реЗрдмрд╕рд╛рдЗрдЯ рдХреЗ рд▓рд┐рдП CSS рдХреЗ рдмрдЬрд╛рдп рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдЖрд╡рд╢реНрдпрдХ .scss рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рд╕реЗ рдХреЗрд╡рд▓ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдЖрд╡рд╢реНрдпрдХ CSS рдХреЛрдб рд▓реЛрдб рдХрд░рдХреЗ рдкреГрд╖реНрдареЛрдВ рдХрд╛ рдЖрдХрд╛рд░ рдмрд╣реБрдд рдХрдо рд╣реЛ рдЬрд╛рдПрдЧрд╛ред

@ cr101 рд╣рд╛рдп, рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдерд╛ рдХрд┐ред рдореИрдВрдиреЗ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЙрд╕ рд╕реЗрдЯрдЕрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ, рдмрд╕ рдЗрд╕реЗ рджреВрд╕рд░реЛрдВ рдХреЗ рд▓рд┐рдП рд╕рдВрджрд░реНрдн рдХреЗ рд▓рд┐рдП рдкреЛрд╕реНрдЯ рдХрд┐рдпрд╛ рд╣реИ (рдореБрдЭреЗ рд▓рдЧрд╛ рдХрд┐ рдпрд╣ рдЕрдЪреНрдЫрд╛ рд╣реИ ...)ред рдореИрдВ рдЕрднреА рднреА рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдореЗрдВ рд╡рд░реНрдгрд┐рдд рдореЗрд░реЗ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВред рдпрджрд┐ рдЖрдк рдореБрдЭреЗ рдЙрд╕ рд╕реЗрдЯрдЕрдк рдкрд░ рдХреБрдЫ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рджреЗ рд╕рдХрддреЗ рд╣реИрдВ рддреЛ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛

рдЕрдзрд┐рдХ рдЙрджрд╛рд╣рд░рдг рдФрд░ рдЪрд░реНрдЪрд╛ рдЕрдЧрд░ рдХрд┐рд╕реА рдХреЛ рджрд┐рд▓рдЪрд╕реНрдкреА рд╣реИ:

https://github.com/iaincollins/nextjs-starter
https://github.com/zeit/next.js/issues/2534
https://github.com/zeit/next.js/tree/v3-beta/examples/with-global-stylesheet

рдЙрдкрд░реЛрдХреНрдд рдФрд░ рдЗрд╕ рдзрд╛рдЧреЗ рдХреЗ рдЖрдзрд╛рд░ рдкрд░, рдореИрдВ рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП PostCSS рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдерд╛:

  • рдЧреНрд▓реЛрдмрд▓ рдПрд╕рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ (рдореЙрдбреНрдпреВрд▓ рд╕рдорд╛рди рд╣реИрдВ, рдЖрдкрдХреЛ рдХреЗрд╡рд▓ рдЙрддреНрдкрд╛рджрди рдХреЗ рд▓рд┐рдП рдЕрдкрдиреЗ рд╕рднреА рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдкреВрд░реНрд╡-рд╕рдВрдХрд▓рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреНрд░рд╡реЗрд╢ рдмрд┐рдВрджреБ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ)ред
  • рд╕рд╛рдкреЗрдХреНрд╖ URL рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕рдВрджрд░реНрднрд┐рдд рдХрд╕реНрдЯрдо рдлреЛрдВрдЯ рдХреЗ рд╕рд╛рде 3 рдЬреА рдкрд╛рд░реНрдЯреА рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЕрд▓рдЧ рдХрд░реЗрдВ (рдЗрдирд▓рд╛рдЗрдирд┐рдВрдЧ рдЬрд╛рджреВ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╣рд▓ рдХрд┐рдпрд╛ рдЧрдпрд╛)ред

рдЙрддреНрдкрд╛рджрди рдореЗрдВ рд╕реЗрд╡рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП /static/styles/app.css рдкрд░ рдПрдХ рдПрдХрд▓ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ, рд╣реЙрдЯ рд░реАрд▓реЛрдбрд┐рдВрдЧ рдЕрднреА рднреА рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИред styled-jsx рдХреЗ рдЙрдкрдпреЛрдЧ рдкрд░ рдзреНрдпрд╛рди рджреЗрдВ, рд▓реЗрдХрд┐рди <style dangerouslySetInnerHTML={} /> рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдЗрд╕реЗ рдмрд┐рдирд╛ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // keep this first
    require("postcss-url")({ url: "inline" })
  ]
};

next.config.js

рд▓реЛрдбрд░ рдХреЛ рдЯреНрд░рд╛рдВрд╕рдлреЙрд░реНрдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПред рд╣реЙрдЯ-рд░реАрд▓реЛрдбрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рджреЗрд╡ рдореЛрдб рдореЗрдВ рдФрд░ рдПрдХрд▓ рдореЗрдВ .css рдлрд╝рд╛рдЗрд▓ рдХреЛ рдирд┐рдХрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рд▓реЛрдбрд░ред рдпрд╣ рдореИрдВ рджреЗрддрд╛ build/app.css рдЗрддрдирд╛ рдЙрддреНрдкрд╛рджрди рдирд┐рд░реНрдорд╛рдг рдкрд░, рдореИрдВ рдЬреЛрдбрд╝рд╛ cp build/app.css static/styles/app.css рдХреЗ рдмрд╛рдж next build рдХреЗ рд░реВрдк рдореЗрдВ рдиреАрдЪреЗ рджрд┐рдЦрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ рдпрд╣ рд╕реНрдерд┐рд░ рдирд┐рд░реНрдпрд╛рдд рдореЗрдВ рдЙрдкрд▓рдмреНрдз рд╣реИ рдФрд░ рдХрд╕реНрдЯрдо рд╣реЗрдбрд░ рдореЗрдВ рдПрдореНрдмреЗрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПред

const ExtractTextPlugin = require('extract-text-webpack-plugin');

export default {
  webpack: (config, { dev }) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        ...(dev
          ? [
              {
                test: /\.css$/,
                use: ['raw-loader', 'postcss-loader']
              },
              {
                test: /\.s(a|c)ss$/,
                use: [
                  'raw-loader',
                  {
                    loader: 'postcss-loader',
                    options: {
                      sourceMap: true
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true
                    }                    
                  }
                ]
              }
            ]
          : [
              {
                test: /\.(css|scss)/,
                use: ExtractTextPlugin.extract({
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        importLoaders: 2,
                        modules: false,
                        url: true,
                        minimize: true,
                        localIdentName: '[hash:base64:5]'
                      }
                    },
                    {
                      loader: 'postcss-loader'
                    },
                    {
                      loader: 'sass-loader'
                    }
                  ]
                })
              }
            ]),
        {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'url-loader?limit=100000&&name=[name].[ext]?[hash:8]'
        }
      ]
    },
    plugins: [
      ...config.plugins,
      ...(dev ? [] : [new ExtractTextPlugin('app.css')])
    ]
  }),
};

рдХрд╕реНрдЯрдо рд╣реЗрдбрд░

const inlineCSS =
  process.env.NODE_ENV !== ENV_PRODUCTION && require('styles/index.scss');
...
      <Head>
        {inlineCSS && <style jsx global> {__html: inlineCSS} </style>}
          {process.env.NODE_ENV === ENV_PRODUCTION &&
            <link
              rel="stylesheet"
              type="text/css"
              href={`/static/styles/app.css?${this.props
                .__NEXT_DATA__.buildId}`}
            />}
      </Head>

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

рдЕрдкрдиреЗ рд╕рднреА .scss рдПрдХ рдПрдХрд▓ CSS рдлрд╝рд╛рдЗрд▓ рдХреЛ рдирд┐рдХрд╛рд▓рдиреЗ рдХреЗ рдмрдЬрд╛рдп рдкреНрд░рддреНрдпреЗрдХ рдЖрдпрд╛рддрд┐рдд .scss рдлрд╝рд╛рдЗрд▓ рдХреЛ рдЕрдкрдиреА CSS рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рд╕рдВрдХрд▓рд┐рдд рдХрд░рдирд╛ рдмреЗрд╣рддрд░ рд╣реЛрдЧрд╛ред рдЗрд╕ рддрд░рд╣ рд╕реЗ рдЖрдк рдХреЗрд╡рд▓ рдЙрди рд╕реАрдПрд╕рдПрд╕ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓реЛрдб рдХрд░реЗрдВрдЧреЗ рдЬреЛ рдЖрдкрдХреЛ рдкреНрд░рддреНрдпреЗрдХ рдкреГрд╖реНрда рдкрд░ рдЪрд╛рд╣рд┐рдПред
рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЖрдк рд╣рд╛рд▓рд╛рдВрдХрд┐ рдРрд╕рд╛ рдХреИрд╕реЗ рдХрд░реЗрдВрдЧреЗред

рдХреГрдкрдпрд╛ рдореЗрд░реЗ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдХреА рдЬрд╛рдВрдЪ рдХрд░реЗрдВ, рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рд╣реИ:
https://github.com/zeit/next.js/pull/2638

@ cr101 рдЬреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╕рдЪ рд╣реИред рд╣рдо рдЕрдкрдиреА рдЦреБрдж рдХреА рдЖрдВрддрд░рд┐рдХ рдпреВрдЖрдИ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХреЛ рд╡рд┐рднрд┐рдиреНрди рдкрд░рд┐рдпреЛрдЬрдирд╛рдУрдВ рдореЗрдВ рдЖрдпрд╛рдд рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдЗрд╕рд▓рд┐рдП рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдореЗрд╢рд╛ рдПрдХ рдлрд╝рд╛рдЗрд▓ рдХрд╛ рдПрдХ рдмрдбрд╝рд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реЛрддрд╛ рд╣реИ (рдЖрджрд░реНрд╢ рдореБрдЭреЗ рдкрддрд╛ рдирд╣реАрдВ рд╣реИ, рдЕрднреА рднреА рдЙрд╕ рдЬрд╛рдирд╡рд░ рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдиреЗ рдкрд░ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ)ред рдпрд╣ рдЕрдЧрд▓рд╛ рд╕реНрдЯреЗрдкрдлреНрд░реЙрдо compile and serve 1 file рд╕реЗ X number of files at X locations ред рдпрд╣ рддрдм рдФрд░ рдЕрдзрд┐рдХ рдЬрдЯрд┐рд▓ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЬрдм рдЖрдк рдЫреЛрдЯреЗ рд╕реАрдПрд╕рдПрд╕ рд╡рд┐рдЦрдВрдбреВ рдмрдирд╛рдо рдмрд╛рд╣рд░реА рдХреИрдЪрдмрд▓ рдФрд░ рдкреНрд░рджрд░реНрд╢рди рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рд╕реАрдбреАрдПрди-рд╣реЛрд╕реНрдЯреЗрдб рд╕рдВрд╕реНрдХрд░рдгреЛрдВ рдореЗрдВ рдЯреНрд░реЗрдбрдСрдл рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдордЬреЗрджрд╛рд░ рд╣реЛрдЧрд╛, рд▓реЗрдХрд┐рди рдЕрдкрдиреЗ рдЖрдк рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдХреЛ рд╢рд╛рдорд┐рд▓ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред EDIT - рдиреЗрдХреНрд╕реНрдЯ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рд╕реНрдХреЛрдк рд╕реЗ рдмрд╛рд╣рд░ рдХрд╛ рд░рд╛рд╕реНрддрд╛ рд╣реИ, рдЗрд╕рдХреЗ рд▓рд┐рдП рд╣рдореЗрдВ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рдЙрджреНрджреЗрд╢реНрдп рдПрдХ рдиреЗрдХреНрд╕реНрдЯ рдкреНрд▓рдЧрдЗрди рдпрд╛ рдкреИрдЯрд░реНрди рд╣реИред

рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдХрд┐рд╕реА рднреА рдкреНрд░рджрд░реНрд╢рди рдореБрджреНрджрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдПрдХ рдмрд╣реБрдд рд╣реА рд╕рд░рд▓ рд╕рдорд╛рдзрд╛рди рд╣реИ рдЕрдЧрд░ рдЖрдк рд╕реНрдЯрд╛рдЗрд▓-рдШрдЯрдХреЛрдВ рдпрд╛ рд╕рдорд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рддреЛ рдмрд╕ рдПрдХ рд╕реАрдПрд╕рдПрд╕ рдЯреЗрдореНрдкрд▓реЗрдЯ рдмрдирд╛рдПрдВ:

import styled from 'styled-components';

const Collapse = props => (
  <__Collapse>
    { props.children }
  </__Collapse>
);

export default Collapse;

/**
 * CSS
 */
const __Collapse = styled.div`
  .rc-collapse {
    background-color: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
  }
  ...
`;
import RcCollapse from 'rc-collapse';
import Collapse from '~/components/rc/Collapse';

const HelpPage = () => (
  <Collapse>
    <RcCollapse>
      <RcCollapse.Panel header="Title">Content</RcCollapse.Panel>
    </RcCollapse>
  </Collapse>
);

рдЗрд╕ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдореБрдЭреЗ рдЬреЛ рдмрд╛рдд рдкрд╕рдВрдж рд╣реИ, рд╡рд╣ рдпрд╣ рд╣реИ рдХрд┐ рдореИрдВ рд╕реНрд░реЛрдд CSS рд╕реЗ рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ (рдЬреЛ рдореБрдЭреЗ рд╡реИрд╕реЗ рднреА рдЬреНрдпрд╛рджрд╛рддрд░ рд╕рдордп рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ), рдореВрд▓ рдирд┐рдпрдореЛрдВ рдХреЗ рд╢реАрд░реНрд╖ рдкрд░ рдУрд╡рд░рд░рд╛рдЗрдб рд▓рд┐рдЦрдиреЗ рдХреЗ рдмрд┐рдирд╛ рдЕрдЧрд░ рдореИрдВрдиреЗ .css рдЖрдпрд╛рдд рдХрд┐рдпрд╛ рд╣реИ node_modules рд╕реЗ рдлрд╝рд╛рдЗрд▓ред

рдпрд╣рд╛рдВ рдмреЗрдмрд▓-рдкреНрд▓рдЧрдЗрди-рдЗрдирд▓рд╛рдЗрди-рдЖрдпрд╛рдд рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХрд╛ рдПрдХ рд╕рд░рд▓ рд╕рдорд╛рдзрд╛рди рд╣реИ:

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ]
}

рдкреЗрдЬ / рдШрдЯрдХ

import "prismjs";

import { PrismCode } from "react-prism";
import prismGlobalStyles from "prismjs/themes/prism.css";

export default () => {
    return (
        <div>
            <style global jsx>
                {prismGlobalStyles}
            </style>
            <PrismCode className="language-javascript">
                {`function(noop) {
                    return noop;
                }`}
            </PrismCode>
            {/* ... */}
        </div>
    );
};

@stovmascript рдпрд╣ рдПрдХ рд╕реБрдВрджрд░ рд╕рдорд╛рдзрд╛рди рд╣реИ рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдЕрднреА рднреА рддреНрд░реБрдЯрд┐рдпрд╛рдВ рд╣реИрдВ (рдореИрдВ https://github.com/Hacker0x01/react-datepicker рд╕реЗ рдирд┐рд░реНрдорд┐рдд .css рдЖрдпрд╛рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ)ред рдХреНрдпрд╛ рдЖрдк рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рд╣реИрдВ рдХрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдпрд╣рд╛рдВ рдЦреЗрд▓рдиреЗ рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдФрд░ рдХреБрдЫ рдирд╣реАрдВ рд╣реИ? рддреНрд░реБрдЯрд┐рдпреЛрдВ рд╕реЗ рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕реЗ рд╕реАрдПрд╕рдПрд╕ рд▓реЛрдбрд┐рдВрдЧ рдХреЗ рдПрдХ рдФрд░ рд╕реНрддрд░ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

@hilarykitz , @stovmascript рд╕рдорд╛рдзрд╛рди рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдХреНрдпрд╛ рдЖрдк рд╣рдореЗрдВ рд╡рд╣ рддреНрд░реБрдЯрд┐ рднреЗрдЬ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рдЖрдк рдкреНрд░рд╛рдкреНрдд рдХрд░ рд░рд╣реЗ рд╣реИрдВ?

@stovmascript - рдЖрдк рдмреЗрдмрд▓ рдХреИрд╢ рд╕реЗ рдХреИрд╕реЗ рдЫреБрдЯрдХрд╛рд░рд╛ рдкрд╛ рд░рд╣реЗ рд╣реИрдВред

  1. рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдмрдирд╛рдУ
  2. рдлрд╝рд╛рдЗрд▓ рдЖрдпрд╛рдд рдХрд░реЗрдВ
  3. рд▓рд╛рдЧреВ
  4. CSS рдлрд╝рд╛рдЗрд▓ рдмрджрд▓реЗрдВ - рдирдпрд╛ рдЪрдпрдирдХрд░реНрддрд╛ рдФрд░ рд╢реИрд▓реА рдЬреЛрдбрд╝реЗрдВ
  5. рдЧрд╡рд╛рд╣ рд╣реИ рдХрд┐ рдмрд╛рдмреЗрд▓ рдХреИрд╢ рдкреБрд░рд╛рдирд╛ рд╕рдВрд╕реНрдХрд░рдг рд░рдЦрддрд╛ рд╣реИ

@ khrome83 рдХреЛ рдЖрдкрдХреЛ node_modules / .cache рд╕рд╛рдлрд╝ рдХрд░рдирд╛ рд╣реЛрдЧрд╛

рдореБрдЭреЗ рдмреИрдмрд▓-рдЗрдирд▓рд╛рдЗрди-рд▓реЛрдбрд░ рдкреНрд▓рдЧрдЗрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди рдорд┐рд▓рд╛ рдЬреЛ рдХреИрд╢ рдХреЛ рд╕рд╛рдл рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЙрдкрд░реЛрдХреНрдд рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдЙрд╕ рдкрджреНрдзрддрд┐ рдХрд╛ рдореБрджреНрджрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдЖрдк рдХреЗрд╡рд▓ рд╡реИрд╢реНрд╡рд┐рдХ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдПрдХ рдЧреИрд░ <style jsx global> рдЯреИрдЧ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдпрд╣ рдбреЗрдЯрд╛-рдЬреЗрдПрдХреНрд╕ рдХреЛ рдЙрджреНрджреЗрд╢реНрдп рдХреЛ рд╕рд╣реА рдврдВрдЧ рд╕реЗ рдкрд░рд╛рдЬрд┐рдд рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред

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

рдореИрдВрдиреЗ @stovmascript рд╕рдорд╛рдзрд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдЙрджрд╛рд╣рд░рдг рдЬреЛрдбрд╝рд╛:

https://github.com/zeit/next.js/pull/3157

рдЖрдк рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдХреИрд╕реЗ рд╢рд╛рдорд┐рд▓ рдХрд░рддреЗ рд╣реИрдВ?
рдореИрдВ 2 рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ рдЬрд┐рдирдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдПрдХ рд╣реА рдШрдЯрдХ рдореЗрдВ рд╣реЛрддреА рд╣реИ, рдкреНрд░рддреНрдпреЗрдХ рдПрдХ рдЕрд▓рдЧ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдХрд┐ рдЙрдиреНрд╣реЗрдВ рдХреИрд╕реЗ рд╕рдВрдпреЛрдЬрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдПред

import rtStyle from 'react-table/react-table.css';
import dpStyle from 'react-datepicker/dist/react-datepicker.css';
...
render() {
    return (
      <div>
        {/* <style jsx global>{ rtStyle }</style> */}
        <style jsx global>{ dpStyle }</style>
...

@ рдЪреИрдирд▓ <style jsx global>{ rtStyle }{dpStyle}</style>

@almeynman рдХреЛ рдпрд╣ рдорд┐рд▓ рд░рд╣рд╛ рд╣реИ:

Module build failed: SyntaxError: C:/.../components/activeUsersTable.js: 
Expected one child under JSX Style tag, but got 2 (eg: <style jsx>{`hi`}</style>)

@ рд╣рд╛рдИрд░реЗрд▓ рджреЛрдиреЛрдВ рдХреЛ рдЯреЗрдореНрдкрд▓реЗрдЯ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдореЗрдВ рдбрд╛рд▓рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░реЗрдВ

@ рд░реЗрдЦрд╛ рдЗрд╕ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░реЗрдВ
<style jsx global>{ $ {rtStyle} $ {dpStyle} }</style>

@alanhr

рдореИрдВ рдЙрди рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдПрдХ рдЬреЗрдПрд╕ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдбрд╛рд▓рдиреЗ рдФрд░ рдирд┐рд░реНрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рддрд╛ рд╣реВрдВ

import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
import styles from './index.css'

export default bootstrap + styles

рдФрд░ рдлрд┐рд░ рдмрд╕

import styles from '../styles'
...
<style jsx global>{styles}</style>

Https://github.com/sheerun/extracted-loader рдХреЗ рд╕рд╛рде рдореИрдВрдиреЗ рдмрдирд╛рдпрд╛ рд╣реИ рдЖрдк ExtractTextPlugin рдХрд╛ рдЙрдкрдпреЛрдЧ рд╡рд┐рдХрд╛рд╕ рдФрд░ рдЙрддреНрдкрд╛рджрди рджреЛрдиреЛрдВ рдХреЗ рд▓рд┐рдП рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рд╡рд┐рдХрд╛рд╕ рдореЗрдВ рдЕрд▓рдЧ html рдХреА рдЬрд░реВрд░рдд рдирд╣реАрдВ рд╣реИ рдпрд╛ js рдореЗрдВ css рдЗрдВрдЬреЗрдХреНрдЯ рдХрд░ рд░рд╣реЗ рд╣реИрдВред

@ рдореИрдВ рдЖрдкрдХреЗ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рдерд╛, рдЕрдЪреНрдЫрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдзрдиреНрдпрд╡рд╛рджред

@ рд╢реЗрд╣рд░реБрди рдЕрдЪреНрдЫрд╛ рд╣реИ, рдзрдиреНрдпрд╡рд╛рдж

рдореИрдВрдиреЗ рдЕрдЧрд▓реЗ рдФрд░ рднреА рд╡реНрдпрд╛рдкрдХ рдЙрджрд╛рд╣рд░рдг рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдП рд╣реИрдВ:
https://github.com/zeit/next.js/pull/3451

рдпрд╣ рдиреЗрдХреНрд╕реНрдЯ рд╡реА 4 рд╕реЗ рдкрд╣рд▓реЗ рдХрд╛рдо рдХрд░рддрд╛ рдерд╛

<style jsx global>{style}</style> <style jsx global>{colors}</style> <style jsx global>{layout}</style>

Jsx рд╡реИрд╢реНрд╡рд┐рдХ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕ aproach рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдХрд╛рд░рдг рдХреНрдпрд╛ рд╣реИ? <style jsx global>{ rtStyle }{dpStyle}</style>

рдореИрдВрдиреЗ рдЦреБрдж рдХреЛ emit-files-loader рдЖрдзрд╛рд░ рдкрд░ рдПрдХ рд╕рдорд╛рдзрд╛рди рдмрдирд╛рдпрд╛ рд╣реИред рдЕрдЧрд░ рдХрд┐рд╕реА рдХреЛ рджрд┐рд▓рдЪрд╕реНрдкреА рд╣реИ рддреЛ рдореИрдВ рдЗрд╕реЗ рдпрд╣рд╛рдВ рдкреЛрд╕реНрдЯ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдпрд╣ рдПрдХ рдХрд╕реНрдЯрдо рд╕рд░реНрд╡рд░ рд╕реЗрдЯрдЕрдк рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИ - рдореВрд▓ рд░реВрдк рд╕реЗ рдЖрдкрдХреЛ .next рдмрд┐рд▓реНрдб рдбрд╛рдпрд░ рдХреЗ рднреАрддрд░ рдПрдХрд▓ рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдХреЛ рд╕реЗрд╡рд╛ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдЗрд╕реЗ рд╢рд╛рдпрдж рд╕рд░реНрд╡рд░ рдХреЗ /_next/... рдкрде рд╕рдВрд░рдЪрдирд╛ рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рдХреЗ рд╕рд░реНрд╡рд░ рдХреЗ рдмрд┐рдирд╛ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдЖрдк import stylesheet from './styles/style.[scss|less|stylus|w/e]'; рд▓рд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдпрд╣ рдЖрдкрдХреА рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдлрд╝рд╛рдЗрд▓ рдХрд╛ рд╕рд╛рд░реНрд╡рдЬрдирд┐рдХ рдкрде рд╣реЛрдЧрд╛, рдЗрд╕рд▓рд┐рдП рдЖрдк рдЗрд╕реЗ <link> рдореЗрдВ рд░рдЦ рд╕рдХрддреЗ рд╣реИрдВред рдЗрд╕рдореЗрдВ рд╕реНрдерд╛рдпреА рдХреИрд╢рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП ?[hash] рдФрд░ рдпрд╣ рд╣реЙрдЯ-рд░реАрд▓реЛрдб рдХрд░рддрд╛ рд╣реИред

@nikolakanacki рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рд╕рдорд░реНрдерди рдмрд╣реБрдд рдЬрд▓реНрдж рдкреЗрд╢ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ https://github.com/zeit/next.js/pull/3578

@timneutkens рдореИрдВрдиреЗ рдЗрд╕реЗ рджреЗрдЦрд╛ рд╣реИ, рдХреНрдпрд╛ "рдмрд╣реБрдд рдЬрд▓реНрдж" рдкрд░ рдПрдХ рдЕрдиреБрдорд╛рди рд╣реИ? рдореИрдВ рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ рдпрд╣ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдХреИрдирд░реА рдореЗрдВ рд╣реИред
рдореБрдЭреЗ рдмрд╕ рдПрдХ рд╕рдорд╛рдзрд╛рди рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдереА, 2-3 рджрд┐рди рдПрдХ рдХреА рддрд▓рд╛рд╢ рдореЗрдВ рдмрд┐рддрд╛рдП, рдФрд░ рдЕрдкрдирд╛ рдЦреБрдж рдХрд╛ рд▓рд┐рдЦрдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣реЗ рдЬреЛ рдореВрд▓ рд░реВрдк рд╕реЗ рдПрдХ "рдЖрд╕рд╛рди рдлрд┐рдХреНрд╕" рд╣реИред рдореИрдВ рдЗрд╕реЗ extract-text-webpack-plugin рд╕рд╛рде рд╕рдВрдпреЛрдЬрд┐рдд рдХрд░рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рднреА рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рддрд╛рдХрд┐ рдХреЛрдИ рднреА рд╕рднреА рдЕрд▓рдЧ-рдЕрд▓рдЧ .[css|stylus|less|scss] рдлрд╝рд╛рдЗрд▓реЛрдВ рдореЗрдВ рд╢рд╛рдорд┐рд▓ рд╣реЛ рд╕рдХреЗ рдФрд░ рдЙрди рд╕рднреА рдХреЛ рдПрдХ рдПрдХрд▓ рд╕реНрдерд┐рд░ рд╕рдВрд╕рд╛рдзрди рдХреЗ рд░реВрдк рдореЗрдВ рдЙрдкрд▓рдмреНрдз рдХрд░рд╛ рд╕рдХреЗ, рдЬреИрд╕реЗ рдХрд┐ рдпрд╣ рд╕рд╛рдорд╛рдиреНрдп рд░реВрдк рд╕реЗ рдЕрдЧрд▓реЗ рдмрд┐рдирд╛ рд╣реЛрдЧрд╛ред

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

@ рдореБрдирд┐рдХреЛрд▓рдХрдиреЗрдХреА рдмрд╣реБрдд рдЬрд▓реНрдж ack ack

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

рдЬрд┐рди рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХреЛ рдореИрдВрдиреЗ рдЕрдЧрд▓реЗ v5 рдХреЗ рд▓рд┐рдП рд▓рд┐рдЦрд╛ рд╣реИ, рд╡реЗ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдРрд╕рд╛ рдХрд░рддреЗ рд╣реИрдВ, рд╡реЗ рдЬрд▓реНрдж рд╣реА I рдУрдкрди рд╕реЛрд░реНрд╕реНрдб рд╣реЛ рдЬрд╛рдПрдВрдЧреЗ

рдЗрдВрдЯрд░реНрд▓реНрд╕ рдкрд░ рдбреЙрдХреНрд╕ рд▓рд┐рдЦрдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ, рд╣рдо рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдмрдирд╛рдиреЗ рдХреА рдпреЛрдЬрдирд╛ рдмрдирд╛ рд░рд╣реЗ рд╣реИрдВ рдХрд┐ v5 рдХреЗ рдмрд╛рд╣рд░ рд╕рдм рдХреБрдЫ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ on

@timneutkens рдзрдиреНрдпрд╡рд╛рдж!

@timneutkens рдЖрдкрдХреЛ рдЕрдкрдбреЗрдЯ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдХреГрдкрдпрд╛ рдЗрд╕ рдЕрдкрдбреЗрдЯ рдХреЗ рдЖрдиреЗ рдХреЗ рдмрд╛рдж рдпрд╣рд╛рдВ рдЕрдкрдбреЗрдЯ рдХрд░реЗрдВ!

рдЗрд╕ рдкрд░ рдХреЛрдИ рднреА рд╕рдорд╛рдЪрд╛рд░?

рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЖрдк рдХрд┐рд╕ рдЕрдиреНрдп рд╕рдорд╛рдЪрд╛рд░ рдХреА рдЙрдореНрдореАрдж рдХрд░ рд░рд╣реЗ рд╣реИрдВ news

рдпрд╣ Next.js v5 рдореЗрдВ рдЬрд╛рд░реА рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ред
рдпрд╣ рднреА рд░реАрдбрдореА рдореЗрдВ рд╣реИ https://github.com/zeit/next.js#importing рд╕рд╛рд╕ - - рдХрдо - рд▓реЗрдЦрдиреА-рдлрд╝рд╛рдЗрд▓реЗрдВ -css

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдЙрд▓реНрд▓реЗрдЦрд┐рдд рдкреАрдЖрд░ рдХреЛ рд╡рд┐рд▓рдп рдХрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ рдФрд░ рдпрд╣ рдореБрджреНрджрд╛ рдмрдВрдж рд╣реЛ рдЧрдпрд╛ рд╣реИред

рдмрд╕ рд░реВрдЯ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ / рд╕реНрдЯреИрдЯрд┐рдХ рдлреЛрд▓реНрдбрд░ рдмрдирд╛рдПрдВ, рдФрд░ рдЕрдкрдиреА рдлрд╛рдЗрд▓ рдХреЛ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВред рдЕрдВрджрд░ / рд╕реНрдерд┐рд░ рдХрд░реЗрдВ, рдлрд┐рд░ рд╣реИрдбрд░ рдПрдЪрдЯреАрдПрдордПрд▓ рд╕рдВрд░рдЪрдирд╛ рд╣реЙрдХ рдХреЗ рд▓рд┐рдПред

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

рдФрд░ рдлрд┐рд░ рдХрд╣реАрдВ рднреА рдирд╛рдо рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ!

@comus

рдмрд╣реБрдд рд╡реНрдпрд╛рдкрдХ рдФрд░ рд╕реНрдорд╛рд░реНрдЯ..рдЗрд╕рдХреЗ рд▓рд┐рдП рдЖрдк рдзрдиреНрдпрд╡рд╛рдж..рдореИрдВ рдЗрд╕ рддрд░рд╣ рдХреЗ рд╕рдорд╛рдзрд╛рди рдХреЛ рдкреВрд░реЗ рджрд┐рди рдЦреЛрдЬ рд░рд╣рд╛ рд╣реВрдВ ..

рдмрд╕ рд░реВрдЯ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ / рд╕реНрдЯреИрдЯрд┐рдХ рдлреЛрд▓реНрдбрд░ рдмрдирд╛рдПрдВ, рдФрд░ рдЕрдкрдиреА рдлрд╛рдЗрд▓ рдХреЛ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВред рдЕрдВрджрд░ / рд╕реНрдерд┐рд░ рдХрд░реЗрдВ, рдлрд┐рд░ рд╣реИрдбрд░ html рд╕реНрдЯреНрд░рдХреНрдЪрд░ рдХреЛ рд╣реЙрдХ рдХрд░реЗрдВред

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

рдФрд░ рдлрд┐рд░ рдХрд╣реАрдВ рднреА рдирд╛рдо рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ!

рдЕрдкрдиреЗ рдЖрд╡реЗрджрди рдХреА рдЬрдбрд╝ рдореЗрдВ рдПрдХ 'рд╕рд╛рд░реНрд╡рдЬрдирд┐рдХ' рдлрд╝реЛрд▓реНрдбрд░ рдмрдирд╛рдПрдБ (рдЬрд╣рд╛рдБ package.json рдлрд╝рд╛рдЗрд▓ рд╕реНрдерд┐рдд рд╣реИ)ред

# 8626 рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕рдорд░реНрдерди рдЬреЛрдбрд╝рд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ!

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

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

jesselee34 picture jesselee34  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

swrdfish picture swrdfish  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

DvirSh picture DvirSh  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

knipferrc picture knipferrc  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

olifante picture olifante  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ