Setiap impor file SCSS dalam file JS diperlakukan sebagai env SASS yang terisolasi, oleh karena itu, tidak ada yang namanya "variabel global" saat menggunakan SCSS di React. Perilaku ini mengharuskan kita untuk mengimpor file variables.scss ke setiap file SCSS yang menggunakan salah satu variabel.

_variables.scss

$global-font : "Cairo", sans-serif;
$global-background: whitesmoke;

App.js

import './App.scss'

export function App()
{
    return (
        <div className="App"></div>
    )
}

App.scss

@import "variables.scss";

.App {
    background-color: $global-background;
    font-family: $global-font;
    // ...
}

Header.js

import './Header.scss'

export function Header()
{
    return (
        <div className="Header"></div>
    )
}

Header.scss

@import "variables.scss";

.Header {
    background-color: $global-background;
    font-family: $global-font;
    // ...
}

Saya harus mengimpor file _variables.scss ke beberapa (mungkin 100+) file SCSS lain untuk menggunakan variabel. Apakah melakukan ini meningkatkan ukuran bundel?

P.S. File variables.scss hanya berisi variabel SCSS dan tidak ada yang lain.

1
anonym 12 Mei 2021, 12:26

2 jawaban

Jawaban Terbaik

Seharusnya tidak-- variabel yang tidak digunakan hanya akan dihapus dari SCSS yang dikompilasi. Dari dokumen Sass Variables:

Variabel Sass semuanya dikompilasi oleh Sass.

Anda dapat bereksperimen dengan ini di Online Sass Playground-- buka UI sistem file, tambahkan banyak variabel yang tidak digunakan ke _variables.scss, lalu simpan, tutup sistem file dan konversi/kompilasi output-- Anda akan melihat bahwa variabel yang digunakan hanya memiliki nilai yang diganti di tempat mereka digunakan, dan variabel yang tidak digunakan "dikompilasi".

1
Alexander Nied 12 Mei 2021, 13:40

Jika hanya variabel maka itu tidak akan mengasapi output tetapi jika file yang Anda impor melakukan lebih dari itu, maka itu mungkin meningkatkan output build Anda, sesuai SCSS dokumen

dengan @import Setiap stylesheet dieksekusi dan CSS-nya dipancarkan setiap kali @import, yang meningkatkan waktu kompilasi dan menghasilkan output yang membengkak.

Saya sarankan menggunakan css variables untuk global Anda. Cukup nyatakan sekali di lembar gaya utama Anda yang dimuat saat masuk


:root {
  --var-one: something;
  --var-two: something;
}

Dan menggunakannya di mana saja,

  // in stylesheets
  .someclass {
     ...
     font-size: var(--var-one);
   }

   //or even in jsx
   
   <component style={{fontSize: 'var(--var-one)'}} />
1
slumbergeist 12 Mei 2021, 13:49