Sådan føjes SASS / SCSS til et Create-react-app-projekt

(Bemærk: Den seneste version af create-react-app har SASS-support indbygget, og denne vejledning er ikke nødvendig.)

Dette forklarer, hvordan du tilføjer SASS / SCSS-forkompilatoren til et eksisterende create-react-app-projekt. Dette fungerer med de almindelige variationer eller Typescript-variationer af create-react-app, og bør fungere uanset de mange webpack-konfigurationssyntaksvarianter derude.

Udstøde
Du skal skubbe dit projekt ud, hvis du ikke allerede har gjort det. Jeg har gjort dette mange gange, men det kan være et stort skræmmende skridt, så læs her for at finde ud af, hvad det betyder at skubbe dit projekt ud. Dette er nødvendigt for manuelt at redigere dine webpack-konfigurationsfiler.

npm kør udkast

Installer SASS
SASS-forkompilatoren kører ved byggetid og ikke driftstid, derfor gemmer vi den med save-dev-kontakten.

npm installer sass-loader node-sass --save-dev

Rediger Webpack Config
Du vil åbne din dev config-fil, finde den eksisterende css-regelblok, duplikere den og bruge den som en reference til at oprette en ny scss-regelblok. Lad den eksisterende css-regel være der, som den er, så dit projekt fungerer med både SCSS og almindelige CSS-filer.

Find filkonfigur / webpack.config.dev.js. Kig efter css-regelblokken. Det ser sådan ud, men ikke nøjagtigt:

{
  test: /\.css$/,
  brug: [
    {
      loader: demand.resolve ('stil-loader'),
    },
    {
      loader: demand.resolve ('css-loader'),
      muligheder: {
        importLoadere: 1,
      }
    },
    {
      loader: demand.resolve ('postcss-loader'),
      muligheder: {
        ident: 'postcss',
        plugins: () => [
          kræver ( 'postcss-flexbugs-fixes'),
          autoprefixer ({
            browsere: [
              '> 1%',
              'sidste 4 versioner',
              'Firefox ESR',
              'ikke dvs. <9',
            ],
            flexbox: 'nej-2009',
          }),
        ],
      },
    },
  ]
},

Kopier og duplikér hele blokken, og tilføj den lige over (før) den eksisterende css-blok. Rediger den nye "test" -værdi for at gøre det scss:

{
  test: /\.scss$/,

Indsæt en sass-loader-sektion midt i den nye regel lige efter css-loader-sektionen. Du indsætter de tre linjer i midten nedenfor. Den nye scss-regel vil se sådan ud, men ikke nøjagtigt:

{
  test: /\.scss$/,
  brug: [
    {
      loader: demand.resolve ('stil-loader'),
    },
    {
      loader: demand.resolve ('css-loader'),
      muligheder: {
        importLoadere: 1,
      }
    },
    {
      loader: demand.resolve ('sass-loader'),
    },
    {
      loader: demand.resolve ('postcss-loader'),
      muligheder: {
        ident: 'postcss',
        plugins: () => [
          kræver ( 'postcss-flexbugs-fixes'),
          autoprefixer ({
            browsere: [
              '> 1%',
              'sidste 4 versioner',
              'Firefox ESR',
              'ikke dvs. <9',
            ],
            flexbox: 'nej-2009',
          }),
        ],
      },
    },
  ]
},

Det kan virke mærkeligt at have "css-loader" inde i scss-reglen, men det er nødvendigt, at webpack håndterer det kompilerede css korrekt, når det er blevet udarbejdet af scss.

Rediger Webpack Config til Prod
Gør den samme procedure "Rediger Webpack Config" igen for filkonfiguration / webpack.config.prod.js. Den eksisterende CSS-blok vil se noget anderledes ud i prod-filen, men proceduren er dybest set den samme. Følg de eksisterende mønstre i css-reglen, og du har det godt.

Nu skal du have en scss-regel og en css-regel i hver konfigurationsfil. Intet særligt at gøre nu andet end at oprette SCSS-filer i stedet for CSS. Du kan valgfrit lade dine gamle CSS-filer være i dit projekt, og de vil blive kombineret med dit SCSS, da du har regler for begge!