Jak přidat SASS / SCSS do projektu create-reagovat-app

(Poznámka: Nejnovější verze aplikace create-rea-app má zabudovanou podporu SASS a tato příručka není nutná.)

To vysvětluje, jak přidat předkompilátor SASS / SCSS do existujícího projektu create-rea-app. Bude to fungovat s běžnými nebo typografickými variantami aplikace create-reagovat-app a mělo by to fungovat bez ohledu na četné varianty syntaxe konfigurace webového balíčku.

Vysunout
Pokud jste tak již neučinili, musíte svůj projekt vysunout. Udělal jsem to mnohokrát, ale může to být velký děsivý krok, takže si přečtěte zde, abyste zjistili, co to znamená vysunout váš projekt. To je nezbytné pro ruční úpravu vašich konfiguračních souborů webového balíčku.

npm běh vysunutí

Nainstalujte SASS
Předkompilátor SASS běží v době sestavení, nikoli za běhu, proto jej ukládáme pomocí přepínače save-dev.

npm install sass-loader node-sass --save-dev

Upravit konfiguraci webového balíčku
Chystáte se otevřít svůj soubor s konfigurací dev, vyhledat existující blok pravidel CSS, duplikovat jej a použít jej jako reference k vytvoření nového bloku pravidel SCS. Ponechte zde existující pravidlo css tak, jak je, aby váš projekt pracoval se soubory SCSS i prostými soubory CSS.

Vyhledejte soubor config / webpack.config.dev.js. Vyhledejte blok pravidel css. Bude to vypadat něco takového, ale ne přesně:

{
  test: /\.css$/,
  použití: [
    {
      loader: requ.resolve ('style-loader'),
    },
    {
      loader: requ.resolve ('css-loader'),
      možnosti: {
        importLoaders: 1,
      }
    },
    {
      loader: requ.resolve („postcss-loader“),
      možnosti: {
        ident: 'postcss',
        pluginy: () => [
          vyžadují („postcss-flexbugs-opravy“),
          autoprefixer ({
            prohlížeče: [
              '> 1%',
              'poslední 4 verze',
              „Firefox ESR“,
              'ne tj. <9',
            ],
            flexbox: „ne-2009“,
          }),
        ],
      },
    },
  ]
},

Zkopírujte a duplikujte celý blok a přidejte jej přímo nad (před) stávající blok css. Upravte novou hodnotu „test“ tak, aby byla scss:

{
  test: /\.scss$/,

Vložte sekci sass-loader uprostřed nového pravidla hned za sekci css-loader. Vložíte tři řádky doprostřed níže. Nové pravidlo scss bude vypadat něco takového, ale ne přesně:

{
  test: /\.scss$/,
  použití: [
    {
      loader: requ.resolve ('style-loader'),
    },
    {
      loader: requ.resolve ('css-loader'),
      možnosti: {
        importLoaders: 1,
      }
    },
    {
      loader: requ.resolve ('sass-loader'),
    },
    {
      loader: requ.resolve („postcss-loader“),
      možnosti: {
        ident: 'postcss',
        pluginy: () => [
          vyžadují („postcss-flexbugs-opravy“),
          autoprefixer ({
            prohlížeče: [
              '> 1%',
              'poslední 4 verze',
              „Firefox ESR“,
              'ne tj. <9',
            ],
            flexbox: „ne-2009“,
          }),
        ],
      },
    },
  ]
},

Může se zdát divné, že se v pravidle scss objeví „css-loader“, ale je nutné, aby webpack zpracoval kompilovanou css správně poté, co byl zkompilován scss.

Upravit webpack Config for Prod
U souboru config / webpack.config.prod.js proveďte stejný postup „Upravit webový konfigurační soubor“. Stávající blok CSS bude v souboru prod vypadat trochu jinak, ale postup je v zásadě stejný. Postupujte podle existujících vzorců v pravidlu css a budete v pořádku.

Nyní byste měli mít pravidlo scss a pravidlo css v každém konfiguračním souboru. Nic zvláštního udělat nyní, než vytvářet soubory SCSS místo CSS. Ve svém projektu můžete případně nechat své staré soubory CSS a budou zkombinovány s vaším SCSS, protože pro oba máte pravidla!