рдХрднреА-рдХрднреА рдЕрдкрдиреЗ 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'
, рдирд╣реАрдВ рдпрдХреАрди рд╣реИ рдХрд┐ рдХреНрдпрд╛ рдпрд╣рд╛рдБ рдкрд░ рдЬрд╛ рд░рд╣рд╛ рд╣реИ рддреЛ рдореИрдВ рдХрд░ рд░рд╣рд╛ рд╣реВрдБред
рдЖрдкрдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдпрд╣ рд╕рд░реНрд╡рд░ рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ?
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдЕрднреА рддрдХ рдЗрд╕рдХреЗ рд▓рд┐рдП рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реИред 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 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдерд╛:
рдЙрддреНрдкрд╛рджрди рдореЗрдВ рд╕реЗрд╡рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП /static/styles/app.css
рдкрд░ рдПрдХ рдПрдХрд▓ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдореЗрдВ, рд╣реЙрдЯ рд░реАрд▓реЛрдбрд┐рдВрдЧ рдЕрднреА рднреА рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИред styled-jsx
рдХреЗ рдЙрдкрдпреЛрдЧ рдкрд░ рдзреНрдпрд╛рди рджреЗрдВ, рд▓реЗрдХрд┐рди <style dangerouslySetInnerHTML={} />
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдЗрд╕реЗ рдмрд┐рдирд╛ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ
module.exports = {
plugins: [
require("postcss-easy-import")({ prefix: "_" }), // keep this first
require("postcss-url")({ url: "inline" })
]
};
рд▓реЛрдбрд░ рдХреЛ рдЯреНрд░рд╛рдВрд╕рдлреЙрд░реНрдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПред рд╣реЙрдЯ-рд░реАрд▓реЛрдбрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рджреЗрд╡ рдореЛрдб рдореЗрдВ рдФрд░ рдПрдХрд▓ рдореЗрдВ .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 - рдЖрдк рдмреЗрдмрд▓ рдХреИрд╢ рд╕реЗ рдХреИрд╕реЗ рдЫреБрдЯрдХрд╛рд░рд╛ рдкрд╛ рд░рд╣реЗ рд╣реИрдВред
@ khrome83 рдХреЛ рдЖрдкрдХреЛ node_modules / .cache рд╕рд╛рдлрд╝ рдХрд░рдирд╛ рд╣реЛрдЧрд╛
рдореБрдЭреЗ рдмреИрдмрд▓-рдЗрдирд▓рд╛рдЗрди-рд▓реЛрдбрд░ рдкреНрд▓рдЧрдЗрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди рдорд┐рд▓рд╛ рдЬреЛ рдХреИрд╢ рдХреЛ рд╕рд╛рдл рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЙрдкрд░реЛрдХреНрдд рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдЙрд╕ рдкрджреНрдзрддрд┐ рдХрд╛ рдореБрджреНрджрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдЖрдк рдХреЗрд╡рд▓ рд╡реИрд╢реНрд╡рд┐рдХ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдПрдХ рдЧреИрд░ <style jsx global>
рдЯреИрдЧ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдпрд╣ рдбреЗрдЯрд╛-рдЬреЗрдПрдХреНрд╕ рдХреЛ рдЙрджреНрджреЗрд╢реНрдп рдХреЛ рд╕рд╣реА рдврдВрдЧ рд╕реЗ рдкрд░рд╛рдЬрд┐рдд рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред
рдореБрдЭреЗ рдмреИрдмрд▓-рдЗрдирд▓рд╛рдЗрди-рд▓реЛрдбрд░ рдкреНрд▓рдЧрдЗрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди рдорд┐рд▓рд╛ рдЬреЛ рдХреИрд╢ рдХреЛ рд╕рд╛рдл рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЙрдкрд░реЛрдХреНрдд рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдЙрд╕ рдкрджреНрдзрддрд┐ рдХрд╛ рдореБрджреНрджрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдЖрдк рдХреЗрд╡рд▓ рд╡реИрд╢реНрд╡рд┐рдХ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЧреИрд░ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп
рдореИрдВрдиреЗ @stovmascript рд╕рдорд╛рдзрд╛рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдЙрджрд╛рд╣рд░рдг рдЬреЛрдбрд╝рд╛:
рдЖрдк рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдХреИрд╕реЗ рд╢рд╛рдорд┐рд▓ рдХрд░рддреЗ рд╣реИрдВ?
рдореИрдВ 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 рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕рдорд░реНрдерди рдЬреЛрдбрд╝рд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ!
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдпрд╣рд╛рдВ рдмреЗрдмрд▓-рдкреНрд▓рдЧрдЗрди-рдЗрдирд▓рд╛рдЗрди-рдЖрдпрд╛рдд рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХрд╛ рдПрдХ рд╕рд░рд▓ рд╕рдорд╛рдзрд╛рди рд╣реИ:
.babelrc
рдкреЗрдЬ / рдШрдЯрдХ