рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдмреЗрдорд╛рдиреА рдореБрджреНрджрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЬрд╛рдирдмреВрдЭрдХрд░ рдЦреЛрд▓рд╛ред рдпрд╣ рддреАрди рджрд┐рди рд╣реИ рдЬрдм рдореИрдВ рдПрдХ рдЕрдЧрд▓рд╛.js рдмреЙрдпрд▓рд░рдкреНрд▓реЗрдЯ (redux, redux-saga, ... рдХреЗ рд╕рд╛рде) рд╕реНрдерд╛рдкрд┐рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдпрд╣ рджреЛ рджрд┐рди рд╣реИ рдХрд┐ рдореИрдВ рдмрд╛рд╣рд░реА css рдФрд░ scss рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╕реНрдерд╛рдкрдирд╛ рдореЗрдВ рдлрдВрд╕ рдЧрдпрд╛ рд╣реВрдВред рдореИрдВрдиреЗ рдЧреНрд▓реЛрдмрд▓-рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЗ рд╕рд╛рде-рд╕рд╛рде-рд╕реНрдХреЛрдкреНрдб-рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ-рдФрд░-рдкреЛрд╕реНрдЯрд╕реАрдПрд╕рдПрд╕ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреА рдЬрд╛рдВрдЪ рдХреА рд╣реИ, рд▓реЗрдХрд┐рди рдЙрдирдореЗрдВ рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдореЗрдВ рдкреВрд░реНрд╡ рдореБрджреНрджреЛрдВ рдореЗрдВ рдЙрд▓реНрд▓рд┐рдЦрд┐рдд рдкреНрд░рдореБрдЦ рд╕рдорд╕реНрдпрд╛рдПрдВ рд╣реИрдВред рдореИрдВрдиреЗ рдмрд╣реБрдд рд╕рд╛рд░реЗ рдЦреБрд▓реЗ рдФрд░ рдмрдВрдж рдореБрджреНрджреЛрдВ рдХреЛ рджреЗрдЦрд╛ рд╣реИ рдЬреЛ рд╣реИрдХ рдХреЗ рд╕рд╛рде рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░ рд░рд╣реЗ рд╣реИрдВ ... рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╡рд┐рдЪрд╛рд░ рд╣реИ рдХрд┐ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╕рд░реНрд╡реЛрддреНрддрдо рд╕рдорд╛рдзрд╛рди рдЦреЛрдЬрдиреЗ рдХреЗ рдмрдЬрд╛рдп, рдЗрд╕реЗ рд╡рд░реНрддрдорд╛рди рдЙрдкрд▓рдмреНрдз рд╕рдорд╛рдзрд╛рдиреЛрдВ рдХреЗ рд╕рд╛рде рд╣рд▓ рдХрд░реЗрдВ рдЬрдм рддрдХ рдХрд┐ рдХреЛрдИ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди рди рдорд┐рд▓ рдЬрд╛рдПред рдХреНрдпреЛрдВрдХрд┐ рдХрдИ рд▓реЛрдЧреЛрдВ рдХреЗ рдкрд╛рд╕ рдЕрднреА рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣реИ рдФрд░ рд╡реЗ рдЗрд╕реЗ рдЕрднреА рд╣рд▓ рд╣реЛрддреЗ рджреЗрдЦрдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ!
рдореИрдВ рд╕рд╣рдордд рд╣реВрдВ, рдХреЗрд╡рд▓ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдореЗрдВ рдХреНрд▓реАрди (рд╣реЙрдЯ рд░реАрд▓реЛрдбрд┐рдВрдЧ рд╕рд╣рд┐рдд) рд╕рдкреЛрд░реНрдЯ рд╣реИ рдФрд░ рдпрд╣реА рдореБрдЭреЗ рдХрд┐рд╕реА рднреА рдЪреАрдЬ рдХреЗ рд▓рд┐рдП рдиреЗрдХреНрд╕реНрдЯ.рдЬреЗрдПрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╕реЗ рд░реЛрдХрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЬрдм рдореБрдЭреЗ рдХреБрдЫ рд░реИрдкрд┐рдб рдкреНрд░реЛрдЯреЛрдЯрд╛рдЗрдк рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕реНрдХреЛрдкрд┐рдВрдЧ рдореБрджреНрджреЛрдВ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдмрд╣реБрдд рд╕рд╛рдл рд╣реИ, рд╕рд╛рде рд╣реА рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕рд╛рде рдмрд╛рд▓ рдШрдЯрдХреЛрдВ рдХреЛ рдХрдХреНрд╖рд╛рдПрдВ рдкрд╛рд╕ рдХрд░рдирд╛ рдЕрднреА рднреА рд╕рдВрднрд╡ рд╣реИ ( babel-plugin-inline-react-svg
рд╕рд╛рде рдЖрдпрд╛рддрд┐рдд рдПрд╕рд╡реАрдЬреА рдкрд░ рдПрдХ рдЧреИрд░-рд╡реИрд╢реНрд╡рд┐рдХ рд╡рд░реНрдЧ рдбрд╛рд▓рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░реЗрдВ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдХреЗ рд╕рд╛рде)ред
рд╡рд╣ рдФрд░ рдореИрдВ рдЬрд┐рддрдирд╛ рд╕рдВрднрд╡ рд╣реЛ рд╕рдХреЗ рдлреНрд░реЗрдорд╡рд░реНрдХ рд▓реЙрдХ-рдЗрди рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП .css
рдлрд╛рдЗрд▓реЛрдВ рдХреЛ рдорд╛рдирдХреАрдХреГрдд рдХрд░рдирд╛ рдкрд╕рдВрдж рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдХреИрд╢рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдЙрддреНрдкрд╛рджрди рдореЗрдВ рдПрдХ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдлрд╛рдЗрд▓реЗрдВ (рдФрд░ рдПрдордХреНрдпреВ рдкреЙрд▓реАрдлрд┐рд▓ рдЬреИрд╕реЗ Respond.js рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддреЗ рд╣реИрдВ рдпрджрд┐ рдЖрдк рдкрд░реНрдпрд╛рдкреНрдд рдмрджрдХрд┐рд╕реНрдордд рд╣реИрдВ рдЕрднреА рднреА рдЖрдИрдИ 8 рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдирд╛ рд╣реИ)ред
рднрд╛рд░реА +1
рдпрд╣ рдПрдХ рдмрдбрд╝реА рдирд┐рд░рд╛рд╢рд╛ рд╣реИ рдХрд┐ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕/рдПрд╕рд╕реАрдПрд╕рдПрд╕ рдЬреИрд╕реА рд╕рд░рд▓ рдЪреАрдЬ рдЕрдЧрд▓реЗ.рдЬреЗрдПрд╕ рдХреЗ рд╕рд╛рде рд╣рд╛рд╕рд┐рд▓ рдХрд░рдирд╛ рд▓рдЧрднрдЧ рдЕрд╕рдВрднрд╡ рд╣реИ, рдЬреЛ рдЗрд╕реЗ рдореЗрд░реЗ 90% рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдХреЗ рд▓рд┐рдП рдмреЗрдХрд╛рд░ рдХрд░ рджреЗрддрд╛ рд╣реИред
рдореИрдВ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рдФрд░ рдореБрдЭреЗ рдПрдХ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдЬрд╣рд╛рдВ рдмрд╛рд╣рд░реА рд╕реНрдХреЙрдкреНрдб рд╕реАрдПрд╕рдПрд╕ рдХреЗ рдЕрддрд┐рд░рд┐рдХреНрдд рдПрдХ рд╡реИрд╢реНрд╡рд┐рдХ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рд╣реЛрдЧрд╛ред
рдЬрдмрдХрд┐ рд╣рдо рд╕реНрдЯрд╛рдЗрд▓ рдЬреЗрдПрд╕рдПрдХреНрд╕ 1 (рд╕рдВрдХрд▓рди рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рд╡реЗрдмрдкреИрдХ) рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рд╡рд╛рд▓реЗ рдмрд╛рд╣рд░реА рд╕реНрдЯрд╛рдЗрд▓рд╕ рдХреЛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣реЗ, рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╕реАрдПрд╕рдПрд╕ рдлрд╛рдЗрд▓реЛрдВ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рдкрд░рд┐рд╡рд░реНрддрди рдХреЛ рддреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рдж рд╕реЗ рд╕реНрдЯрд╛рдЗрд▓ рдЬреЗрдПрд╕рдПрдХреНрд╕ 2 рдкрд░ рдЗрд╕реЗ рд╕рдордЭрдиреЗ рдореЗрдВ рдХрдард┐рдирд╛рдИ рд╣реЛ рд░рд╣реА рд╣реИред
рд╡рд░реНрддрдорд╛рди рджреГрд╖реНрдЯрд┐рдХреЛрдг:
import ComponentStyles from './footer.styl';
...
<style jsx>
{ComponentStyles}
</style>
https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss рдХреЛ рдмрд╛рд╣рд░реА scss рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддреЗ рд╣реБрдП рджреЗрдЦрдирд╛ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред
рдкрд░реНрдпрд╛рд╡рд░рдг рдХреА рд╕реНрдерд╛рдкрдирд╛ рдХрд░рддреЗ рд╕рдордп рд╣рдо рдЙрд╕реА рдкрд░реАрдХреНрд╖рд╛ рд╕реЗ рдЧреБрдЬрд░реЗред
рдЖрдЦрд┐рд░рдХрд╛рд░ рд╣рдо рдЦреЛ-рдЧреНрд░рд┐рдб рдХреЗ рд╕рд╛рде scss+post css рдХреЗ рд╕рд╛рде рдПрдХ рд╡реИрд╢реНрд╡рд┐рдХ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЗ рд╕рд╛рде рдмрд╕ рдЧрдПред
рд╣реЙрдЯ рд░реАрд▓реЛрдбрд┐рдВрдЧ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдПрдХ рдЖрджрд░реНрд╢ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реИ (рд╡реИрд╢реНрд╡рд┐рдХ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЛ рдПрдХ рд╕рд╛рде рд▓реЛрдб рд╣реЛрдиреЗ рдХреЗ рдХрд╛рд░рдг), рдпрд╣ рдПрдХ рдареАрдХ рд╕рдордЭреМрддрд╛ рд╣реИред
рдирд┐рд░реНрднрд░рддрд╛
"autoprefixer": "^7.1.6",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"pixrem": "^4.0.1",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.8"
package.json
...
"postcss": {
"plugins": {
"lost": {},
"postcss-easy-import": {
"prefix": "_"
},
"autoprefixer": {},
"pixrem": {}
}
}
...
next.config.js
webpack: (config, { dev }) => {
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]'
}
}
,
{
test: /\.css$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader']
}
,
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader',
{ loader: 'sass-loader',
options: {
includePaths: ['styles', 'node_modules']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
}
]
}
)
return config
}
pages/_document.js
...
import stylesheet from 'styles/main.scss'
...
<Head>
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
</Head>
...
рдФрд░ рдлрд┐рд░ рдЖрдк рдЕрдкрдиреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ /styles/main.scss . рд╕реЗ рд╢реБрд░реВ рдХрд░рдХреЗ рдкреНрд░рдмрдВрдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ
рдЖрд╢рд╛ рд╣реИ рдХрд┐ рдЗрд╕рд╕реЗ рд╕рд╣рд╛рдпрддрд╛ рдорд┐рд▓реЗрдЧреА
рдЗрди рджреЛ рд╢реИрд▓реА рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдХреЗ рд╕рд╛рде рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ ( with-global-stylesheet рдФрд░ with-scoped-stylesheets-and-postcss ) рдпрд╣ рд╣реИ рдХрд┐ рдЙрдирдореЗрдВ рд╕реЗ рдХреЛрдИ рднреА рд╕реНрдиреИрдкрд╢реЙрдЯ рдореЗрдВ CSS рдХреЗ рд╕рд╛рде рдЬреЗрд╕реНрдЯ рдФрд░ рд╕реНрдиреИрдкрд╢реЙрдЯ рдкрд░реАрдХреНрд╖рдг рдХреЗ рд╕рд╛рде рдПрдХреАрдХреГрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд░рд▓ рдирд╣реАрдВ рд╣реИред рдРрд╕реЗ рд▓реЛрдЧ рд░рд╣реЗ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЛрдВрдиреЗ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЬреЗрд╕реНрдЯ рдХреЛ рд╡реЗрдмрдкреИрдХ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рдкреНрдд рдХрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЫреЛрдбрд╝рдХрд░ рд╣реИред
рдЗрд╕ SO рдЙрддреНрддрд░ рдореЗрдВ рд╡рд░реНрдгрд┐рдд babel-jest
рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░ рдлрд╝рд╛рдЗрд▓ рдЪрд▓рд╛рдирд╛ рдЗрддрдирд╛ рдЦрд░рд╛рдм рд╣реИрдХ рдЬреИрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИред
рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдЧреНрд▓реЛрдмрд▓-рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рдЖрдкрдХреЛ рд╡реЗрдмрдкреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рд▓реЗрдХрд┐рди рдЬреЗрд╕реНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдк рд╡реЗрдмрдкреИрдХ рдкрд░ рднрд░реЛрд╕рд╛ рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ, рдХреЗрд╡рд▓ рдмреЗрдмреЗрд▓ред
рдХреНрдпрд╛ рдЗрд╕ рдЬрдЧрд╣ рдореЗрдВ рдХрд┐рд╕реА рдХреЗ рдкрд╛рд╕ рд╡рд┐рдЪрд╛рд░ рд╣реИрдВ?
рдореБрдЭреЗ рдЗрд╕реА рддрд░рд╣ рдХреА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝ рд░рд╣рд╛ рд╣реИред рдореИрдВ рдиреЗрдХреНрд╕реНрдЯрдЬ рдХреЗ рд▓рд┐рдП рдирдпрд╛ рд╣реВрдВ рдФрд░ рдореИрдВ "рдмрд╛рд╣рд░реА-рд╕реНрдХреЛрдкреНрдб-рд╕реАрдПрд╕рдПрд╕ рдХреЗ рд╕рд╛рде" рдЙрджрд╛рд╣рд░рдг рдХреЛ рдареАрдХ рд╕реЗ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ред рдХрднреА-рдХрднреА, рдореЗрд░реА рд╕реАрдПрд╕рдПрд╕ рд▓реЛрдб рд╣реЛ рдЬрд╛рддреА рд╣реИ рдФрд░ рдХрднреА-рдХрднреА рдирд╣реАрдВред рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдХрд┐ рдпрд╣ рд╡рд╣реА рдореБрджреНрджрд╛ рд╣реИ рдЬрд┐рд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЖрдк рдмрд╛рдд рдХрд░ рд░рд╣реЗ рд╣реИрдВред
рдЗрд╕ рд▓реЛрдбрд░ рдХреЗ рд╕рд╛рде рдмрд╛рд╣рд░реА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рдореБрджреНрджреЛрдВ рдХрд╛ рд╕рдорд╛рдзрд╛рди https://github.com/coox/styled-jsx-css-loader
@ilionic рдореИрдВрдиреЗ рдЖрдкрдХрд╛ рд╕рдорд╛рдзрд╛рди рдЬрд╛рдВрдЪ рд▓рд┐рдпрд╛ рд╣реИред рдпрд╣ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реИ! рд╢реБрдХреНрд░рд┐рдпрд╛ :)
@arefaslani рдореБрдЭреЗ рдирд╣реАрдВ рд▓рдЧрддрд╛ рдХрд┐ рдпрд╣ рдореБрджреНрджрд╛ рдмрдВрдж рд╣реЛ рдЧрдпрд╛ рд╣реИред
HTTP v1 рдХреЗ рд░реВрдк рдореЗрдВ рдпрд╣ рдЕрднреА рднреА рдмрд╣реБрдд рд╕рд╛рд░реЗ рд╕реАрдПрд╕рдПрд╕ рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рднрдпрд╛рдирдХ рдкреНрд░рджрд░реНрд╢рди рдХрд░ рд╣реИ, рдпрд╣ рдирд╛рдЯрдХреАрдп рд░реВрдк рд╕реЗ рдкрд╣рд▓реЗ рдЖрдХрд░реНрд╖рд┐рдд рдХрд░рдиреЗ рдХрд╛ рд╕рдордп рдмрдврд╝рд╛рддрд╛ рд╣реИред
рдЙрдЪрд┐рдд рдмрд╛рд╣рд░реА рд╢реИрд▓реА рд╕рдорд░реНрдерди CSS рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдЧрд╛ рдФрд░ рдЗрд╕рдХреЗ рдкрд░рд┐рдгрд╛рдорд╕реНрд╡рд░реВрдк a рдПрдХ рдЗрдирд▓рд╛рдЗрди рдирд╣реАрдВ ...
Also, this suggestion doesn't resolve use cases where a CSS framework like bootstrap needs to be included from node_modules. Including Bootstrap as an inline CSS on every page would be horrible. And would negate the benefits of browser caching, e.t.c
In short, I really don't think this issue can be closed... It's still very much an ongoing problem.
@israelidanny рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЖрдкрдХрд╛ рдХреНрдпрд╛ рдорддрд▓рдм рд╣реИ, рдпрд╣ рд╕рд┐рд▓реНрд╡рд░ рдмреБрд▓реЗрдЯ рд╕реЙрд▓реНрдпреВрд╢рди рдирд╣реАрдВ рд╣реИред рд╣рдо css рдлрд╝рд╛рдЗрд▓ рдХреЛ рдЕрд▓рдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рдврд╛рдВрдЪреЗ рдХреЗ рдореБрдЦреНрдп рднрд╛рдЧреЛрдВ рдХреЛ рдирд┐рдХрд╛рд▓ рд░рд╣реЗ рд╣реИрдВ рддрд╛рдХрд┐ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдЗрд╕реЗ рдХреИрд╢ рдХрд░ рд╕рдХреЗрдВред рдЖрджрд░реНрд╢ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░реЛрдВ рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдврд╛рдВрдЪреЗ рд╕реЗ рдирд┐рдкрдЯрдиреЗ рдХреА рдпрд╣ рдЕрдЬреАрдмрддрд╛ рдирдП рд╕реАрдПрд╕рдПрд╕-рдЗрди-рдЬреЗрдПрд╕ рджреГрд╖реНрдЯрд┐рдХреЛрдгреЛрдВ рдХреА рдУрд░ рдмрдврд╝ рд░рд╣реА рд╣реИ рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдврд╛рдВрдЪреЗ рдкрд░ рдирд┐рд░реНрднрд░рддрд╛ рдореЗрдВ рдХрдЯреМрддреА рдХрд░ рд░рд╣реА рд╣реИред
@ilionic рдореИрдВ рд╕рдордЭрддрд╛ рд╣реВрдВ рдХрд┐ рдЖрдк рдХреНрдпрд╛ рдХрд╣ рд░рд╣реЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдлрд┐рд░ рднреА - рдЯрди рдЗрдирд▓рд╛рдЗрди рд╕реАрдПрд╕рдПрд╕ рдкреНрд░рджрд░реНрд╢рди рдХреЗ рд▓рд┐рдП рдЦрд░рд╛рдм рд╣реИ (рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдкрд╣рд▓реЗ рдлреНрд░реЗрдо рдХреЗ рд▓рд┐рдП рд╕рдордп)ред рдореЗрд░реЗ рдкрд╛рд╕ рдХрд╛рдлреА рдХреБрдЫ рдкрд░рд┐рдпреЛрдЬрдирд╛рдПрдВ рдереАрдВ рдЬрд╣рд╛рдВ рд╣рдордиреЗ рдЙрд╕рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд рдЕрдзрд┐рдХ рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд┐рдпрд╛ред
рдпрд╣ рд╕рдм рдЦреЛрдирд╛ рд╢рд░реНрдо рдХреА рдмрд╛рдд рд╣реИ, рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдЗрд╕ рддрдереНрдп рдХреЛ рджреЗрдЦрддреЗ рд╣реБрдП рдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рд╕рд░реНрд╡рд░ рджреНрд╡рд╛рд░рд╛ рдкреНрд░рджрд╛рди рдХрд┐рдпрд╛ рдЧрдпрд╛ рдбреЛрдо рд╣реЛ рд╕рдХрддрд╛ рд╣реИред
рд╢рд╛рдпрдж рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдмрдВрдж рдХрд░реЗрдВ, рд▓реЗрдХрд┐рди рдПрдХ рдирдпрд╛ рдЦреЛрд▓реЗрдВ, рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдРрд╕реЗ рд╕рдорд╛рдзрд╛рди рдХреЗ рд▓рд┐рдП рдЬреЛ рд╣рдореЗрдВ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдХреЛ рд▓рд┐рдВрдХ рдХрд░рдиреЗ рджреЗрддрд╛ рд╣реИ?
рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ рдкреНрд░рдЪрд▓рд┐рдд рд╡рд┐рдХрд╛рд╕ рдкреНрд░рдерд╛ рдХреА рдЙрдкреЗрдХреНрд╖рд╛ рдХрд░рдирд╛ рдЕрдЬреАрдм рд╣реЛрдЧрд╛ред
@israelidanny рд╕рд╣рдордд рд╣реИрдВ, рд╣рдо рдЕрднреА рднреА CSS рдкреНрд░рджрд░реНрд╢рди рдХреЗ рд╕рд╛рде рд╕рдВрдШрд░реНрд╖ рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдФрд░ рдмрд┐рдирд╛ рдкреНрд░рдореБрдЦ рдкреБрдирд░реНрд▓реЗрдЦрди рдХреЗ рдпрд╣ рд╕реНрдкрд╖реНрдЯ рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЗрд╕реЗ рдХреИрд╕реЗ рд╣рд▓ рдХрд┐рдпрд╛ рдЬрд╛рдП, рдЗрд╕рд▓рд┐рдП рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдФрд░ рдЧрд╣рд░реА рд╣реЛ рдЬрд╛рддреА рд╣реИред рд╢рд╛рдпрдж рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рдЕрдзрд┐рдХ рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рд░реЗрдкреЛ рд╣реИ?
@ilionic рд╣рдореНрдо, рдореИрдВ рдирд╣реАрдВ рджреЗрдЦрддрд╛ рдХрд┐ рдХреИрд╕реЗ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рд░реЗрдкреЛ рд╕рд╣реА рдЬрдЧрд╣ рд╣реЛрдЧреАред
рд╕рдорд╕реНрдпрд╛ рдЙрдирдХреЗ рд╕рд╛рде рдирд╣реАрдВ рд╣реИ, рд╕рдорд╕реНрдпрд╛ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЗ рд▓рд┐рдП next.js рд╕рдорд░реНрдерди рдХреЛ рд╕рдХреНрд╖рдо рдХрд░ рд░рд╣реА рд╣реИ, рдЬрд┐рд╕рдореЗрдВ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдХреЗ рд╕рд╛рде рдХреБрдЫ рднреА рд╢рд╛рдорд┐рд▓ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдпрд╛ рдирд╣реАрдВ рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИред
рддреБрдо рдХреНрдпрд╛ рд╕реЛрдЪрддреЗ рд╣реЛ?
@israelidanny рдпрд╣ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рдерд╛, рд▓реЗрдХрд┐рди рдпрд╣ рд╡реИрд╕реЗ рднреА рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рддреБрдо рд╕рд╣реА рд╣реЛред рдХреИрд╢рд┐рдВрдЧ рдХреЗ рдмрд┐рдирд╛ рдкреНрд░рддреНрдпреЗрдХ рдкреГрд╖реНрда рдореЗрдВ рд╕рднреА рд╕реАрдПрд╕рдПрд╕ рдЗрдирд▓рд╛рдЗрди рд░рдЦрдирд╛ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реИред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдореИрдВ рдЗрд╕ рднрд╛рдЧ рдореЗрдВ рдЖрдкрд╕реЗ рд╕рд╣рдордд рд╣реВрдВ:
рд╕рдорд╕реНрдпрд╛ рдЙрдирдХреЗ рд╕рд╛рде рдирд╣реАрдВ рд╣реИ, рд╕рдорд╕реНрдпрд╛ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЗ рд▓рд┐рдП next.js рд╕рдорд░реНрдерди рдХреЛ рд╕рдХреНрд╖рдо рдХрд░ рд░рд╣реА рд╣реИ, рдЬрд┐рд╕рдореЗрдВ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдХреЗ рд╕рд╛рде рдХреБрдЫ рднреА рд╢рд╛рдорд┐рд▓ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдпрд╛ рдирд╣реАрдВ рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИред
рдФрд░ @ilionic рд╕реЗ рдмрд┐рд▓реНрдХреБрд▓ рдЕрд╕рд╣рдордд рд╣реИрдВ:
рд╢рд╛рдпрдж рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕ рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рдЕрдзрд┐рдХ рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рд░реЗрдкреЛ рд╣реИ
рдореИрдВрдиреЗ рд╕реНрдЯрд╛рдЗрд▓-рдЬреЗрдПрд╕рдПрдХреНрд╕/рд╕реАрдПрд╕рдПрд╕ рд▓реЛрдбрд░ рдХреЗ рд╕рд╛рде рдПрдХ рд╕рдорд╛рдзрд╛рди рдкреНрд░рдмрдВрдзрд┐рдд рдХрд┐рдпрд╛ред рдЖрдк https://github.com/P233/nextjs-with-scss рд╕реЗ рдХреЛрдб рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ
рд╣рд╛рд▓рд╛рдВрдХрд┐, рдореИрдВрдиреЗ рджреЗрдЦрд╛ рдХрд┐ @import
ed scss рдлрд╝рд╛рдЗрд▓реЗрдВ рдирд╣реАрдВ рджреЗрдЦреА рдЬрд╛рддреА рд╣реИрдВ рдФрд░ рд╣реЙрдЯ рд░реАрд▓реЛрдб рдХреЛ рдЯреНрд░рд┐рдЧрд░ рдирд╣реАрдВ рдХрд░реЗрдВрдЧреА, рдЬреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдореБрдЭреЗ рдирд┐рд░рд╛рд╢ рдХрд░рддрд╛ рд╣реИред
рдореИрдВрдиреЗ рдирд┐рдХрд╛рд▓реА рдЧрдИ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рд╣реЙрдЯрд░реЗрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП https://github.com/sheerun/extracted-loader рдмрдирд╛рдпрд╛ рд╣реИред рдпрд╣ рд╡рд┐рдХрд╛рд╕ рдХреЗ рд▓рд┐рдП рднреА рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП dangerouslySetInnerHTML
рдЖрд╡рд╢реНрдпрдХ рдирд╣реАрдВ рд╣реИред
рдЖрдк рдЗрд╕реЗ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ:
config.module.rules.push({
test: /\.css$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
/* Your configuration here */
}))
})
config.plugins.push(new ExtractTextPlugin('index.css'))
@sheerun , рдзрдиреНрдпрд╡рд╛рдж, рд▓реЗрдХрд┐рди рдореИрдВ рдЕрдкрдиреЗ рд╕реАрдПрд╕рдПрд╕ рдХреЛ рдШрдЯрдХреЛрдВ рдореЗрдВ рдХреИрд╕реЗ рдЗрдВрдЬреЗрдХреНрдЯ рдХрд░рддрд╛ рд╣реВрдВ?
рдЖрдк рдЗрдВрдЬреЗрдХреНрдЯ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ, рдЖрдк ExtractTextPlugin рдХреЗ рд╕рд╛рде рд╕рдм рдХреБрдЫ рдирд┐рдХрд╛рд▓рддреЗ рд╣реИрдВ рдФрд░ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рд▓рд┐рдЦрддреЗ рд╣реИрдВ:
<Head>
<link rel='stylesheet' type='text/css' href="/static/index.css" />
</Head>
рдЖрдкрдХреЗ рдШрдЯрдХреЛрдВ рдореЗрдВ рдХреБрдЫ рдЗрд╕ рддрд░рд╣
import './styles.scss'
рдкрд░реНрдпрд╛рдкреНрдд рд╣реЛрдЧрд╛
рдареАрдХ рд╣реИ, рд▓реЗрдХрд┐рди рдЕрдм рдореБрдЭреЗ рдПрдХ рддреНрд░реБрдЯрд┐ рд╣реИ:
./рдШрдЯрдХ/рд╣реЛрдо/рд╣реЛрдо.рдЬреЗрдПрд╕
рдореЙрдбреНрдпреВрд▓ рдирд╣реАрдВ рдорд┐рд▓рд╛: рддреНрд░реБрдЯрд┐: 'рдбреА: \ рд╕рд╛рдЗрдЯреНрд╕ \ рдХрд╛рдо \ рд╡рд┐рдЬреБрдЕрд▓ рдкреНрд░рд╕реНрддрд╛рд╡' рдореЗрдВ 'рд╕реАрдПрд╕рдПрд╕-рд▓реЛрдбрд░' рдХреЛ рд╣рд▓ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛
@ ./рдШрдЯрдХ/рд╣реЛрдо/рд╣реЛрдо.рдЬреЗрдПрд╕ 13:0-22
@ ./рдкреГрд╖реНрда?рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐
@ рдмрд╣реБ ./рдкреГрд╖реНрда?рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐
рдореЗрд░рд╛ рд╣реЛрдо.рдЬреЗрдПрд╕ рдШрдЯрдХ:
import { observer } from 'mobx-react';
import './Home.scss'
import MainSection from './MainSection/MainSection'
import Sections from './Sections/Sections';
import Features from './Features/Features'
import Pricing from './Pricing/Pricing';
import Footer from './Footer/Footer'
const Home = () => {
return (
<div className="Home">
<MainSection/>
<Sections/>
<Features/>
<Pricing/>
<Footer/>
</div>
)
};
export default observer ( Home );
рдореЗрд░рд╛ рдЕрдЧрд▓рд╛.config.js:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
webpack: function ( config, { dev } ) {
config.module.rules.push({
test: /\.(sa|sc|c)ss$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
use: [
"babel-loader",
{
loader: 'css-loader',
options: {
url: true,
minimize: !dev,
sourceMap: dev,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: dev,
plugins: [
require('autoprefixer')({
/* options */
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: dev
}
}
]
}))
});
config.plugins.push(new ExtractTextPlugin('index.css'));
if ( config.resolve.alias ) {
delete config.resolve.alias['react'];
delete config.resolve.alias['react-dom']
}
for (let index = 0; index < config.plugins.length; index += 1) {
if (config.plugins[index].constructor.name === "UglifyJsPlugin") {
config.plugins.splice(index, 1, new UglifyJSPlugin({
sourceMap: true,
parallel: true,
}));
break;
}
}
return config
}
};
рддреЛ рдореИрдВ рдЧрд▓рдд рдХреНрдпрд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ?
рдореИрдВрдиреЗ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдореЗрдВ рдПрд╕рд╕реАрдПрд╕рдПрд╕, рдпреВрдЖрд░рдПрд▓() рдХреЗ рд╕рд╛рде рдмрд╣реБрдд рдЙрдиреНрдирдд рдЙрджрд╛рд╣рд░рдг рдЬреЛрдбрд╝рд╛ рд╣реИ, рдЖрдИрдПрдордЬреА [src]ред рдЗрд╕реЗ now.sh рдХреЗ рд╕рд╛рде рдмреЙрдХреНрд╕ рдХрд╛ рдХрд╛рдо рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЗрд╕рдореЗрдВ рд╣реЙрдЯ-рд░реАрд▓реЛрдбрд┐рдВрдЧ рдФрд░ рдПрдХреНрд╕рдкреЛрд░реНрдЯ рдареАрдХ рд╕реЗ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ:
https://github.com/sheerun/extracted-loader/tree/master/examples/with-next
@psycura рдореИрдВ рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ рдЖрдк рд╡рд┐рдВрдбреЛрдЬ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдЖрдкрдХреЗ рд▓рд┐рдП рддреБрд░рдВрдд рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдХреГрдкрдпрд╛ рдлрд┐рдХреНрд╕ рдкреАрдЖрд░ рднреЗрдЬреЗрдВ
рдиреЗрдХреНрд╕реНрдЯрдЬ рдХреЗ рд▓рд┐рдП рд╢рд░реНрдо рдХреА рдмрд╛рдд рд╣реИ рдХрд┐ рдпрд╣ рдмрд╛рд╣рд░реА рд╕реАрдПрд╕рдПрд╕ рдлрд╛рдЗрд▓реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рдирд╣реАрдВ рджреЗрддрд╛ рд╣реИред рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рд╕реНрдЯрд╛рдЗрд▓рд╢реАрдЯ рдХреЗ рд╕рд╛рде рдХрдИ рддреИрдпрд╛рд░-рдЙрдкрдпреЛрдЧ рдкреИрдХреЗрдЬ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдореИрдВ рдЕрдкрдиреЗ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред рд▓реЗрдХрд┐рди рдореИрдВ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛! рдореИрдВрдиреЗ рдХрдИ рд╡рд┐рдХрд▓реНрдкреЛрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд▓реЗрдХрд┐рди рдХреЛрдИ рднреА рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛: рдЗрд╕рдХреЗ рд▓рд┐рдП рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдПрдХ рджрд┐рди рдмрд┐рддрд╛рдпрд╛ред
@mkozhukharenko рдпрд╣ css рдФрд░ https://github.com/coox/styled-jsx-css-loader рдХреЗ рд╕рд╛рде рдПрдХ рдЙрджрд╛рд╣рд░рдг
@arefaslani рдореИрдВрдиреЗ рд╕рднреА рд╡рд┐рдХрд▓реНрдкреЛрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА, рди рд╣реА рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛ред рдореИрдВ рдЗрд╕ рдврд╛рдВрдЪреЗ рд╕реЗ рдкреВрд░реА рддрд░рд╣ рдирд┐рд░рд╛рд╢ рд╣реВрдВред рдзрд░рддреА рдкрд░ рдЗрддрдирд╛ рдЖрд╕рд╛рди рдХрд╛рдо рдХреИрд╕реЗ рдореБрд╢реНрдХрд┐рд▓ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ? рдореИрдВ рдЗрд╕ рддрд░рд╣ рдХреЗ рдУрдкрд┐рдиреЗрдЯреЗрдб рдлреНрд░реЗрдорд╡рд░реНрдХ рдлреНрд░реЗрдорд╡рд░реНрдХ рдХрд╛ рджреЛрдмрд╛рд░рд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдирд╣реАрдВ рдХрд░реВрдВрдЧрд╛ред
@mkozhukharenko рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдХреЛ рджреЗрдЦреЗрдВ: https://github.com/arefaslani/next.js/tree/canary/examples/with-external-scoped-scssред рдореИрдВ рдЗрд╕реЗ рдореБрдЦреНрдп рд░реЗрдкреЛ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВред
рдмрд╕ рдЕрдкрдиреА рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдФрд░ рдЕрдзрд┐рдХ css рдЬреЛрдбрд╝рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░реЗрдВ рдФрд░ рдЖрдк рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ styled-jsx
рдЗрд╕реЗ рд╕рдВрднрд╛рд▓ рдирд╣реАрдВ рд╕рдХрддрд╛ рд╣реИред рдореБрдЭреЗ 'jsx-undefind' рдорд┐рд▓ рд░рд╣рд╛ рд╣реИ рдпрд╛ 'jsx-4231512' рдХреЛ рддреНрд░реБрдЯрд┐рдпрд╛рдБ рдирд╣реАрдВ рдорд┐рд▓ рд╕рдХрддреА рд╣реИрдВ
@arefaslani рдХреНрдпрд╛ рдЖрдкрдХреЗ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд╕рд╛рде рдЗрд╕ рдкреИрдЯрд░реНрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рд╣реИ?
import classes from './styles.scss'
const MyComponent = () => (
<header className={classes.header}>Hello</header>
)
@protoEvangelion рджреБрд░реНрднрд╛рдЧреНрдп рд╕реЗ, рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдпрд╣ рдХреЗрд╡рд▓ рд╕реНрдЯрд╛рдЗрд▓-
рдУрд╣ рдареАрдХ рд╣реИ рддреНрд╡рд░рд┐рдд рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж :)
рдпрд╣ рд╢рд░реНрдо рдХреА рдмрд╛рдд рд╣реИ рдХрд┐ next.js рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдкрд╣рд▓реЗ рдореМрдЬреВрджрд╛ рд╕рдВрд╕рд╛рдзрди рдХрд╛ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдирд╣реАрдВ рд╕реЛрдЪрддрд╛ред рдПрдХ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдХреЗ рд▓рд┐рдП рдЬрдЯрд┐рд▓ рдирд┐рдпрдо рд╕реНрдерд╛рдкрд┐рдд рдХрд░рдиреЗ рдореЗрдВ рдХрд┐рддрдирд╛ рд╕рдордп рдмрд░реНрдмрд╛рдж рд╣реЛрддрд╛ рд╣реИред
рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рд╕рдорд╛рдзрд╛рди рдкрд░ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬреЛ рд╕рднреА рд╡реЗрдмрдкреИрдХ рд▓реЛрдбрд░ рдХреЛ рдХрд╛рдо рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред
рдореИрдВ рдпрд╣ рднреА рдмрддрд╛рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рдХрд┐ рдореБрдЭреЗ рд╡реНрдпрдХреНрддрд┐рдЧрдд рд░реВрдк рд╕реЗ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рд▓реЛрдЧреЛрдВ рдХрд╛ рд▓рд╣рдЬрд╛ рдкрд╕рдВрдж рдирд╣реАрдВ рд╣реИред
рдореИрдВ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╕рдордЭрддрд╛ рд╣реВрдВ рдХрд┐ рдЖрдк рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдФрд░ рд╣рдо рдЗрд╕ рдЕрдиреБрд░реЛрдз рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╣реБрдд рдЬрд╛рдЧрд░реВрдХ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рдореИрдВрдиреЗ рдкрд┐рдЫрд▓реЗ рд╕рдкреНрддрд╛рд╣ рдХреЛ рд╕рд░реНрд╡реЛрддреНрддрдо рд╕рдВрднрд╡ рд╕рдорд╛рдзрд╛рди рдкрд░ рдХрд╛рдо рдХрд░рддреЗ рд╣реБрдП рдмрд┐рддрд╛рдпрд╛ рд╣реИ
рдЗрд╕ рдкрд░ рдФрд░ рдЬрд▓реНрдж рд╣реАред рддрдм рддрдХ, рдХреГрдкрдпрд╛ рджрдпрд╛рд▓реБ рдФрд░ рдЦреБрд╢ рдЫреБрдЯреНрдЯрд┐рдпрд╛рдБ рдмрдиреЗрдВ
рд╣рд╛рдп рд╕рдм рд▓реЛрдЧ, рдореБрдЭреЗ рдЕрдиреНрдп рдЬреАрдердм рдкрд░ рдПрдХ рд╕рдорд╛рдзрд╛рди рдорд┐рд▓рд╛,
рд╕реАрдПрд╕рдПрд╕-рдореЙрдбреНрдпреВрд▓ рдХреЗ рд╕рдорд╛рди рдкреНрд░рднрд╛рд╡ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмреАрдИрдПрдо рдирд┐рдпрдореЛрдВ рдХрд╛ рдкрд╛рд▓рди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрдВрдХрд╛рд▓-рд▓реЛрдбрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ,
рдХреНрдпреЛрдВрдХрд┐ рдЖрдкрдХреЛ .scss.json рдЬреЗрдирд░реЗрдЯ рдХрд░рдирд╛ рд╣реЛрдЧрд╛, рдФрд░ рдлрд┐рд░ .scss.json рдЬреЗрдирд░реЗрдЯ рдХрд┐рдП рдЧрдП .scss.json рдХреЛ рд╣рдЯрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЯреНрд░реИрд╢ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред рд╣рд╛рд▓рд╛рдВрдХрд┐ рдпрд╣ рдЖрджрд░реНрд╢ рдирд╣реАрдВ рд▓рдЧрддрд╛ рд╣реИ, рдореИрдВ рдЖрдкрдХреЛ рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рднреЗрдЬрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдЕрдиреНрдп рдмреЗрд╣рддрд░ рддрд░реАрдХреЗ рд╣реИрдВред
Hi, everybody, I found a solution on another github,
Use skeleton-loader to comply with BEM rules to achieve the same effect as css-modules,
Because it will need to generate. Scss.json, then use the trash will be generated. Scss.json delete
Although it feels less than ideal, give it to you to see if there are any other better ways
@timneutkens рдпрд╣ рдЖрдкрдХреЗ рд╕рдорд╛рдзрд╛рди рдХреЗ рд╕рд╛рде рдХреИрд╕рд╛ рдЪрд▓ рд░рд╣рд╛ рд╣реИ?
рдореИрдВрдиреЗ рдПрдХ рдЕрдЧрд▓рд╛ рдмреЙрдпрд▓рд░рдкреНрд▓реЗрдЯ рдмрдирд╛рдпрд╛ рд╣реИ рдЬреЛ scss, css рдФрд░ рдХрдИ рдЕрдиреНрдп рд╕реБрд╡рд┐рдзрд╛рдУрдВ рдХреЛ рдЖрдпрд╛рдд рдХрд░рдиреЗ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рддрд╛ рд╣реИред рдЗрд╕реЗ рджреЗрдЦреЗрдВ рдФрд░ рдЕрдЧрд░ рдЖрдкрдХреЛ рдпрд╣ рдкрд╕рдВрдж рдЖрдпрд╛, рддреЛ рдЗрд╕реЗ рдПрдХ рд╕реНрдЯрд╛рд░ рджреЗрдВ;)
https://arefaslani.github.io/next-boilerplate
@ рдмреЛрдмреЗрдЯрд╛ рдореИрдВрдиреЗ рдЗрд╕реЗ рдХрд╛рдо рдХрд░ рд▓рд┐рдпрд╛ рд╣реИ, рдХреБрдЫ рдХрд┐рдирд╛рд░реЗ рдХреЗ рдорд╛рдорд▓реЗ рд╣реИрдВ
@timneutkens рд╕реБрдирдХрд░ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд▓рдЧрд╛! рдЖрдк рдЗрд╕реЗ рдХрдм рдкреНрд░рдХрд╛рд╢рд┐рдд рд╣реЛрдиреЗ рдХреА рдЙрдореНрдореАрдж рдХрд░рддреЗ рд╣реИрдВ?
@ рдмреЛрдмреЗрдЯрд╛ рдореБрдЭреЗ рдпрдХреАрди рд╣реИ рдХрд┐ рдЬрдм рд╡рд╣ рдкреНрд░рдХрд╛рд╢рд┐рдд рд╣реЛрдЧрд╛ рдФрд░ рд╣рдорд╛рд░реЗ рдЙрдкрдпреЛрдЧ рдХреЗ рд▓рд┐рдП рддреИрдпрд╛рд░ рд╣реЛрдЧрд╛ рддреЛ рд╡рд╣ рдЗрд╕ рдзрд╛рдЧреЗ рдкрд░ рдкреЛрд╕реНрдЯ рдХрд░реЗрдЧрд╛ред
@jthegedus рдореБрдЭреЗ рдпрдХреАрди рд╣реИ рдХрд┐ рд╡рд╣ рднреА рдХрд░реЗрдЧрд╛, рд▓реЗрдХрд┐рди рдореИрдВ рдЕрдиреБрдорд╛рдиреЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рддрд╛рдХрд┐ рд▓реЛрдЧ рдЙрд╕ @timneutkens рдкрд░ рдирд┐рд░реНрдгрдп рд▓реЗ
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдореИрдВ рдпрд╣ рднреА рдмрддрд╛рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛ рдХрд┐ рдореБрдЭреЗ рд╡реНрдпрдХреНрддрд┐рдЧрдд рд░реВрдк рд╕реЗ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рд▓реЛрдЧреЛрдВ рдХрд╛ рд▓рд╣рдЬрд╛ рдкрд╕рдВрдж рдирд╣реАрдВ рд╣реИред
рдореИрдВ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╕рдордЭрддрд╛ рд╣реВрдВ рдХрд┐ рдЖрдк рд╕реАрдПрд╕рдПрд╕ рдЖрдпрд╛рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдФрд░ рд╣рдо рдЗрд╕ рдЕрдиреБрд░реЛрдз рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╣реБрдд рдЬрд╛рдЧрд░реВрдХ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рдореИрдВрдиреЗ рдкрд┐рдЫрд▓реЗ рд╕рдкреНрддрд╛рд╣ рдХреЛ рд╕рд░реНрд╡реЛрддреНрддрдо рд╕рдВрднрд╡ рд╕рдорд╛рдзрд╛рди рдкрд░ рдХрд╛рдо рдХрд░рддреЗ рд╣реБрдП рдмрд┐рддрд╛рдпрд╛ рд╣реИ
рдЗрд╕ рдкрд░ рдФрд░ рдЬрд▓реНрдж рд╣реАред рддрдм рддрдХ, рдХреГрдкрдпрд╛ рджрдпрд╛рд▓реБ рдФрд░ рдЦреБрд╢ рдЫреБрдЯреНрдЯрд┐рдпрд╛рдБ рдмрдиреЗрдВ