рдмрдЧ рдХрд╛ рд╡рд░реНрдгрди рдХрд░реЗрдВ
SCSS рд╢реИрд▓реА рдмреНрд▓реЙрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдЕрдкреНрд░рдпреБрдХреНрдд CSS рд╡рд┐рдЧрд▓реА рдкреАрд▓реА рд▓рд╛рдЗрдиреЗрдВ рд╕рд╣реА рдЬрдЧрд╣ рдкрд░ рджрд┐рдЦрд╛рдИ рдирд╣реАрдВ рджреЗрддреА рд╣реИрдВред
рдЗрд╕реЗ .introduction
рд╡рд░реНрдЧ рдХреЛ рдЙрдЬрд╛рдЧрд░ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рд▓реЗрдХрд┐рди рдпрд╣ height
рд╕рдВрдкрддреНрддрд┐ (рдпрд╛ рдкрд╣рд▓реЗ рдкрд░рд┐рднрд╛рд╖рд┐рдд рд╢реИрд▓реА рдХреЗ рдХрд┐рд╕реА рднреА рдЕрдВрддрд┐рдо рд╕рдВрдкрддреНрддрд┐) рдХреЛ рдЙрдЬрд╛рдЧрд░ рдХрд░рддрд╛ рд╣реИред
lang
рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЗ рдмрд┐рдирд╛ рд╕рд╛рдорд╛рдиреНрдп рд╕реАрдПрд╕рдПрд╕ рдмреНрд▓реЙрдХ рдкрд░ рд╡рд╛рдкрд╕ рдЬрд╛рдиреЗ рдкрд░, рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред
рдкреНрд░рдЬрдирди рдХрд░рдирд╛
<style>
рд╕реЗ <style lang="scss">
рдмрджрд▓реЗрдВрдЕрдкреЗрдХреНрд╖рд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░
рдЬрдм рдпрд╣ рд╕рд┐рд░реНрдл рдПрдХ рд╕рд╛рдорд╛рдиреНрдп <style>
рдмреНрд▓реЙрдХ рд╣реЛ рддреЛ рдЙрд╕реА рддрд░рд╣ рдХрд╛рдо рдХрд░реЗрдВ
рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ
рдКрдкрд░ рджреЗрдЦреЛ
рд╕рд┐рд╕реНрдЯрдо (рдХреГрдкрдпрд╛ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдЬрд╛рдирдХрд╛рд░реА рдкреВрд░реА рдХрд░реЗрдВ):
рдЕрддрд┐рд░рд┐рдХреНрдд рд╕рдВрджрд░реНрдн
рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рдмрдирд╛рддреЗ рд╕рдордп рдХреЛрдИ рдЕрддрд┐рд░рд┐рдХреНрдд рдкреНрд▓рдЧрдЗрдиреНрд╕ рдпрд╛ рдПрдХреНрд╕рдЯреЗрдВрд╢рди рд╕рдХреНрд╖рдо рдирд╣реАрдВ рдереЗред рдореИрдВрдиреЗ рднреА рдХреЗрд╡рд▓ рдорд╛рдорд▓реЗ рдореЗрдВ vscode рдХреЛ рдлрд┐рд░ рд╕реЗ рд╢реБрд░реВ рдХрд┐рдпрд╛ред
рдХреНрдпрд╛ рдЖрдк рдХреГрдкрдпрд╛ рдЙрд╕ рдХреЛрдб рд╕реНрдирд┐рдкреЗрдЯ рдХреЛ рдкреЛрд╕реНрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬрд┐рд╕рдиреЗ рдЖрдкрдХреЛ рдЗрд╕ рд▓рд╛рдЗрди рдкрд░ рд╕реНрдХреНрд╡рд┐рдЧрд▓реНрд╕ рджрд┐рдП рд╣реИрдВ?
рдХреНрдпрд╛ рдЖрдк рдХреГрдкрдпрд╛ рдЙрд╕ рдХреЛрдб рд╕реНрдирд┐рдкреЗрдЯ рдХреЛ рдкреЛрд╕реНрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬрд┐рд╕рдиреЗ рдЖрдкрдХреЛ рдЗрд╕ рд▓рд╛рдЗрди рдкрд░ рд╕реНрдХреНрд╡рд┐рдЧрд▓реНрд╕ рджрд┐рдП рд╣реИрдВ?
рдЗрд╕рд╕реЗ рдХреЛрдИ рдлрд░реНрдХ рдирд╣реАрдВ рдкрдбрд╝рддрд╛ рдХрд┐ рдЖрдк рдХрд┐рд╕ рдХреЛрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред рдпрд╣ рдЬрд▓реНрджреА рд╕реЗ рдореЗрд░реЗ рдЕрдВрдд рдкрд░ рдЯреВрдЯрдирд╛ рд╢реБрд░реВ рдХрд░ рджреЗрддрд╛ рд╣реИред рдЬрд┐рддрдирд╛ рдЕрдзрд┐рдХ рдХреЛрдб, рдЙрддрдирд╛ рд╣реА рдмреБрд░рд╛ред
рдпрд╣рд╛рдБ рдПрдХ рддреНрд╡рд░рд┐рдд REPL рд╣реИ:
https://svelte.dev/repl/97a01882d3444d77ad2a62480e310921?version=3.25.0
рдореЗрд░реА IDE рдореЗрдВ, SCSS рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЗ рд╕рд╛рде
рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЗ рдмрд┐рдирд╛:
рдзрдиреНрдпрд╡рд╛рджред рдореБрдЭреЗ рдпрд╣ рдЬрд╛рдВрдЪрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдХрд┐ рдХреБрдЫ рдСрдлрд╕реЗрдЯ рджреНрд╡рд╛рд░рд╛ рд▓рд╛рдЗрдиреЗрдВ рдмрдВрдж рд╣реИрдВ, рд▓реЗрдХрд┐рди рд╕рд╛рдорд╛рдиреНрдп рддреМрд░ рдкрд░ рдореБрдЭреЗ рдбрд░ рд╣реИ рдХрд┐ рд╣рдо рдмрд╣реБрдд рдХреБрдЫ рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рдХреНрдпреЛрдВрдХрд┐ рд╣рдо рд╕реНрд░реЛрдд рдХреЗ рдирдХреНрд╢реЗ рдкрд░ рднрд░реЛрд╕рд╛ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдЕрдЧрд░ рд╡реЗ рдЧрд▓рдд рд╣реИрдВ / рдпрд╣ рдЕрдЪреНрдЫрд╛ рдирд╣реАрдВ рд╣реИ, рддреЛ рд╣рдо рдХреБрдЫ рднреА рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред
рд╕реНрд░реЛрдд рдорд╛рдирдЪрд┐рддреНрд░ рдЬреЛ SCSS рд╕реЗ CSS рддрдХ рдЯреНрд░рд╛рдВрд╕рдкреНрд▓рд┐рдХреЗрд╢рди рдХреЗ рджреМрд░рд╛рди рдЙрддреНрдкрдиреНрди рд╣реЛрддреЗ рд╣реИрдВред рд╣рдореЗрдВ рдХреЛрдб рдХреЛ Svelte рдХрдВрдкрд╛рдЗрд▓рд░ (рдЬреЛ рдЕрдкреНрд░рдпреБрдХреНрдд рдЪреЗрддрд╛рд╡рдиреА рджреЗрддрд╛ рд╣реИ) рдХреЛ рдкрд╛рд╕ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдРрд╕рд╛ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдХреЗрд╡рд▓ CSS рд╕реЗ рдирд┐рдкрдЯ рд╕рдХрддрд╛ рд╣реИред
рдХреНрдпрд╛ рд╕реЛрд░реНрд╕рдореИрдкреНрд╕ рдХреБрдЫ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдореИрдВ рдЕрдкрдиреЗ рдЕрдВрдд рдореЗрдВ рдареАрдХ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ? рдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ svelte preprocess рдХреЗ рд╕рд╛рде рдПрдХ рд╕рдорд╕реНрдпрд╛ рд╣реИ? рдЬрдордирд╛?
рдореЗрд░реЗ рд▓рд┐рдП рднрд╛рдЧреНрдпрд╢рд╛рд▓реА рд╣реИ рдХрд┐ рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдореИрдВ рдХреНрдпрд╛ рд▓рд┐рдЦ тАЛтАЛрд░рд╣рд╛ рд╣реВрдВ рдФрд░ html рдореИрдВ рд╣рдЯрд╛ рд░рд╣рд╛ рд╣реВрдВ, рдЗрд╕рд▓рд┐рдП рдореИрдВ рдЕрднреА рдЗрд╕рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдХреНрдпрд╛ рдореЗрд░реЗ рдкрд╛рд╕ рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рдЗрдиреНрд╣реЗрдВ рдмрдВрдж рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рд╕рдВрдд рддрд░реАрдХрд╛ рд╣реИ?
https://github.com/sveltejs/svelte/pull/5015 рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░ рд╕реНрд░реЛрдд рд╕рдорд░реНрдерди рдХреЗ рд▓рд┐рдП рдорд░реНрдЬ рдХрд┐рдП рдЬрд╛рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ
рдХреНрдпрд╛ рд╕реЛрд░реНрд╕рдореИрдкреНрд╕ рдХреБрдЫ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдореИрдВ рдЕрдкрдиреЗ рдЕрдВрдд рдореЗрдВ рдареАрдХ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ? рдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ svelte preprocess рдХреЗ рд╕рд╛рде рдПрдХ рд╕рдорд╕реНрдпрд╛ рд╣реИ? рдЬрдордирд╛?
рдПрд╕рд╕реАрдПрд╕рдПрд╕ рд╕рдВрдХрд▓рдХ ( node-sass
/ sass
, рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИ рдХрд┐ рддреБрдо рдХреНрдпрд╛ рдкреНрд░рдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ) рд╕реНрд░реЛрдд рдирдХреНрд╢реЗ рдкреИрджрд╛ рдХрд░рддрд╛ рд╣реИред
рдореЗрд░реЗ рд▓рд┐рдП рднрд╛рдЧреНрдпрд╢рд╛рд▓реА рд╣реИ рдХрд┐ рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдореИрдВ рдХреНрдпрд╛ рд▓рд┐рдЦ тАЛтАЛрд░рд╣рд╛ рд╣реВрдВ рдФрд░ html рдореИрдВ рд╣рдЯрд╛ рд░рд╣рд╛ рд╣реВрдВ, рдЗрд╕рд▓рд┐рдП рдореИрдВ рдЕрднреА рдЗрд╕рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдХреНрдпрд╛ рдореЗрд░реЗ рдкрд╛рд╕ рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рдЗрдиреНрд╣реЗрдВ рдмрдВрдж рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рд╕рдВрдд рддрд░реАрдХрд╛ рд╣реИ?
рдпрджрд┐ рдЖрдк рд╡рд┐рд╢реНрд╡ рд╕реНрддрд░ рдкрд░ рдХреБрдЫ рдЪреЗрддрд╛рд╡рдирд┐рдпреЛрдВ рдХреЛ рдмрдВрдж рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рдЗрд╕ рд╡рд┐рдХрд▓реНрдк рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдРрд╕рд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред
sveltejs / svelte # 5015 рдХреЛ рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░ рд╕реЛрд░реНрд╕рдореИрдк рд╕рдорд░реНрдерди рдХреЗ рд▓рд┐рдП рдорд░реНрдЬ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ
рднрд╛рд╖рд╛-рдФрдЬрд╛рд░реЛрдВ рдХреЗ рд▓рд┐рдП рдирд╣реАрдВ, рдлрд┐рд▓рд╣рд╛рд▓ рд╣рдо рдЦреБрдж рдХреА рдореИрдкрд┐рдВрдЧ рдХрд░рддреЗ рд╣реИрдВ (рд▓реЗрдХрд┐рди рдЗрд╕ рднреВрдорд┐ рдХреЗ рдПрдХ рдмрд╛рд░ рдХреЛрдб рдХреЗ рдкреВрд░реЗ рдЭреБрдВрдб рдХреЛ рдирд┐рдХрд╛рд▓ рд╕рдХрддреЗ рд╣реИрдВ)ред
sveltejs / svelte # 5015 рдХреЛ рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░ рд╕реЛрд░реНрд╕рдореИрдк рд╕рдорд░реНрдерди рдХреЗ рд▓рд┐рдП рдорд░реНрдЬ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ
рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдЕрдкреЗрдХреНрд╖рд╛рдХреГрдд рд▓реЛрдХрдкреНрд░рд┐рдп рдЕрдиреБрд░реЛрдз рд╣реИред рдХрд┐рд╕реА рднреА рдЬреНрдЮрд╛рдд рдХрд╛рд░рдг рдкрд░ рдЗрд╕реЗ рдЕрднреА рддрдХ рд╡рд┐рд▓рдп рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ?
рдпрд╣ рд╣рдорд╛рд░реЗ рд░рдбрд╛рд░ рдкрд░ рдЕрдзрд┐рдХ рд╣реИред рдпрд╣ рдЕрднреА рддрдХ рд╣рд╛рд▓рд╛рдВрдХрд┐ рдПрдХ рд╡рд┐рд▓рдп рдпреЛрдЧреНрдп рд╕реНрдерд┐рддрд┐ рдореЗрдВ рдирд╣реАрдВ рд╣реИред рдореИрдВрдиреЗ рдЙрд╕ рдкрд░ рдХреБрдЫ рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдВ рдЫреЛрдбрд╝ рджреАрдВред
рдореИрдВрдиреЗ рдЬрд╛рдБрдЪ рдХреА рд▓реЗрдХрд┐рди рдХреЗрд╡рд▓ SCSS рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдЕрдиреБрднрд╡ рдХреА рдЧрдИ рд▓рд╛рдЗрди рдСрдлрд╝рд╕реЗрдЯ рдХреЛ рдкреБрди: рдЙрддреНрдкрдиреНрди рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рдерд╛ред рдХреНрдпрд╛ рдЖрдк PostCSS рдХрд╛ рднреА рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ? рдореИрдВ рдХреЗрд╡рд▓ рдкреБрди: рдкреЗрд╢ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдЕрдЧрд░ рдореИрдВ рднреА рдкреЛрд╕реНрдЯрд╕реАрдПрд╕рдПрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВред рдпрджрд┐ рд╣рд╛рдВ, рддреЛ рдЗрд╕рдХрд╛ рдХрд╛рд░рдг PostCSS рд╕реЗ рд╕реНрд░реЛрдд рдХреЗ рдирдХреНрд╢реЗ рдЧрд╛рдпрдм рд╣реИрдВред рдореИрдВрдиреЗ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ svelte-preprocess
рд▓рд┐рдП рдЦреЛрд▓рд╛ред
рджреЗрд░реА рд╕реЗ рдЬрд╡рд╛рдм рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдорд╛рдлреАред рдореЗрд░реЗ рдкрд╛рд╕ https://www.npmjs.com/package/postcss-load-config рдЗрдВрд╕реНрдЯреЙрд▓ рд╣реИред рдпрд╣ рдЗрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВред
рддреЛ рдЗрд╕рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдЖрдк рдкреЛрд╕реНрдЯрдкреЗрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП postcss: true
рдЖрдкрдХреЗ рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реИ? рдпрджрд┐ рд╣рд╛рдВ, рддреЛ svelte-preprocess
рдирд┐рд╢реНрдЪрд┐рдд рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдареАрдХ рд╣реЛ рдЬрд╛рдПрдЧреАред
рддреЛ рдЗрд╕рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдЖрдк рдкреЛрд╕реНрдЯрдкреЗрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП
postcss: true
рдЖрдкрдХреЗ рдкреНрд░реАрдкреНрд░реЛрд╕реЗрд╕рд░ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реИ?
рдпрджрд┐ рдкреЛрд╕реНрдЯ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рд╕рд╣реА рдкрд░ рд╕реЗрдЯ рд╣реИ, рддреЛ рд╣рд╛рдБред
рдпрджрд┐ рдРрд╕рд╛ рд╣реИ, рддреЛ рдпрд╣ svelte-preprocess рдХреЗ рднреАрддрд░ рд╕рдорд╕реНрдпрд╛ рдХреЗ рдмрд╛рдж рдареАрдХ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред
ЁЯСА
рдпрд╣ рд╕рдВрд╕реНрдХрд░рдг 4.6.1
svelte-preprocess
рд╕рд╛рде рддрдп рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдпрд╣ рд╕рдВрд╕реНрдХрд░рдг
4.6.1
svelte-preprocess
рд╕рд╛рде рддрдп рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред