Sådan samles Sass-filer i Visual Studio og Webpack

Sass er en meget populær CSS-forprocessor. Formålet med denne tutorial er at vise dig, hvordan du kompilerer Sass-filer i Visual Studio ved hjælp af Webpack. Vores diskussion vil omfatte minifikation og autoprefix til produktion.

Visual Studio møder Sass

Sikker på, der er nogle plug-ins i Visual Studio Marketplace, og det kan være rart at bare installere et plug-in og glemme konfigurationen. Men hvad sker der, hvis plug-in ikke længere understøttes og holder op med at arbejde med nyere Visual Studio-versioner? Nå, for dårligt. Dette er tilfældet med et af de mest populære compiler-plug-ins på markedet.

Ved selv at konfigurere samlingen, har du total kontrol over output. Sælgerpræfikser tilføjes også automatisk til dine CSS-regler. Hvor cool er det?

Forudsætninger

Du skal have Node installeret, og du kan gribe den her. Det er det virkelig. Du har også brug for npm, men det installeres også med Node.

Oprettelse af projektet

Bemærk: Vi opretter en .NET Core MVC-app, men de samme principper gælder for enhver ASP.NET MVC-app. Du skal bare ændre Webpack-konfigurationen lidt for at udsende CSS-filen til indholdsfortegnelsen.

Åbn Visual Studio og opret en ny ASP.NET Core Web Application, og vælg derefter Web Application (Model-View-Controller). Jeg navngiver mit projekt netcore-sass-webpack.

Oprettelse af projektet

Opret en mappe med Styles inden for roden af ​​projektet. Inde i den skal du oprette en Sass-fil og navngive den site.scss. Åbn denne nye Sass-fil, og kopier følgende:

/ * Se dokumentation på https: //docs.microsoft.com/aspnet/core/client-side/bundling-and-minification \
for detaljer om konfiguration af dette projekt til at bundle og minificere statiske webaktiver. * /
krop {
    polstring: 50px;
    polstring-bund: 20px;
    baggrund: # D69655 url ('../ wwwroot / images / pattern.png') gentag;
}

/ * Indpakningselement * /
/ * Indstil noget grundlæggende polstring for at forhindre indhold i at ramme kanterne * /
.body-indhold {
    polstring til venstre: 15px;
    polstring-højre: 15px;
}

/* Karrusel */
.carousel-billedtekst p {
    skriftstørrelse: 20px;
    linjehøjde: 1,4;
}

/ * Opret .svg-filer i karruseldisplayet korrekt i ældre browsere * /
.carousel-inner .item img [src $ = ". svg"] {
    bredde: 100%;
}

/ * QR-kodegenerator * /
#QR kode {
    margen: 15px;
}

/ * Skjul / omarranger til mindre skærme * /
@media-skærm og (maks. bredde: 767px) {
    / * Skjul billedtekster * /
    .carousel-billedtekst {
        display: ingen;
    }
}

Du vil bemærke, at dette er den samme CSS, der blev leveret af Visual Studio, da vi oprettede projektet, med undtagelse af baggrundsreglen i koden. Slet nu det medfølgende CSS, der er placeret under wwwroot / css (begge filer: site.css og site.min.css). Bare rolig, vi genererer dem automatisk med Webpack.

Download nu pattern.png og placer det under wwwroot / images.

Opret en tom JavaScript-fil under roden af ​​programmet og navngiv den webpack.config.js. Vi tager os af dette senere. Du skal ende med følgende projektstruktur:

Projektstruktur

Bemærk: Du behøver ikke at udføre de følgende to trin for hvert projekt, kun én gang (medmindre du fjerner og installerer Visual Studio igen).

Du skal give Visual Studio Node-installationsstien. Gå tilbage til dit projekt og vælg Værktøjer -> Indstillinger i venstre rude Projekter og løsninger -> Webpakkestyring og tilføj stien til Node-installation øverst på listen (C: \ Program Files \ nodejs eller C: \ Program Files (x86) \ nodejs, afhængigt af om du installerede x64- eller x86-versionen).

Knudesti

Endelig download NPM Task Runner og installer den - men du skal først lukke Visual Studio.

Webpack og NPM-afhængigheder

Åbn kommandoprompt, og naviger til roden af ​​projektet, og installer de nødvendige afhængigheder:

cd netcore-sass-webpack \ netcore-sass-webpack
npm start -y
npm i -D webpack webpack-cli node-sass postcss-loader postcss-preset-env sass-loader css-loader cssnano mini-css-extract-plugin cross-env fil-loader

Den første npm-kommando initialiserer din package.json, og den anden installerer dine afhængigheder.

  • webpack, webpack-cli - Modulbundt
  • node-sass - Bindinger til node til LibSass; yder support til Sass
  • postcss-loader, postcss-preset-env - PostCSS loader til Webpack til behandling af autofrefixing og minificering
  • sass-loader, css-loader - Webpack har brug for specifikke læssere til at understøtte Sass og CSS
  • cssnano - CSS minifier
  • mini-css-extract-plugin - Ekstraherer CSS til en separat fil
  • cross-env - Tilbyder support til Windows-brugere til miljøvariabler. Vi bruger NODE_ENMiljøvariabel
  • fil-loader - Tilbyder support til filer (billeder) i vores CSS-regler

På dette tidspunkt kan du genåbne projektet i Visual Studio. Når projektet er færdig med indlæsning, skal du åbne package.json og tilføje følgende scripts:

"scripts": {
    "dev": "webpack - watch",
    "build": "cross-env NODE_ENV = produktionswebpakke"
  },
  • dev - Vi vil binde dette script, når projektet åbnes, og Webpack vil løbende se på ændringer til Sass-kildekildefilerne, kompilere dem og udskrive den separate CSS-fil
  • build - Vi vil binde dette script inden hvert projektopbygning og vil producere produktions-CSS-filen, inklusive minifikation og autoprefixing

Bemærk: NPM-scripts køres automatisk ved hjælp af vinduet Task Runner. Mere om det senere.

Det er tid til at arbejde på vores Webpack-konfiguration. Åbn webpack.config.js og kopier følgende:

const path = kræve ("sti");
const MiniCssExtractPlugin = kræver ("mini-css-extract-plugin");
const postcssPresetEnv = kræve ("postcss-preset-env");
// Vi får 'process.env.NODE_ENV' fra NPM-scripts
// Husk 'dev'-scriptet?
const devMode = process.env.NODE_ENV! == "produktion";
module.exports = {
  // Fortæller Webpack, hvilke indbyggede optimeringer, der skal bruges
  // Hvis du udelader dette, vil Webpack som standard 'produktion'
  tilstand: devMode? "udvikling": "produktion",
// Webpack skal vide, hvor bundlingprocessen skal startes,
  // så vi definerer Sass-filen under biblioteket './Styles'
  post: ["./Styles/site.scss"],
// Det er her, vi definerer stien, hvor Webpack skal placere
  // en bundtet JS-fil. Webpack skal fremstille denne fil,
  // men til vores formål kan du ignorere det
  output: {
    sti: path.resolve (__ dirname, "wwwroot"),
// Angiv basisstien for alle typografier inden for din
    // Ansøgning. Dette er i forhold til outputstien, så ind
    // vores sag vil det være './wwwroot/css'
    publicPath: "/ css",
// Navnet på outputpakken. Stien er også relativ
    // til outputstien, så './wwwroot/js'
    filnavn: "js / sass.js"
  },
  modul: {
    // Array af regler, der fortæller Webpack, hvordan modulerne (output)
    // oprettes
    regler: [
      {
        // Se efter Sass-filer og behandle dem i henhold til
        // regler specificeret i de forskellige læssere
        test: /\.(sa|sc)ss$/,
// Brug følgende læssere fra højre til venstre, så det gør det
        // Brug først sass-loader og slutter med MiniCssExtractPlugin
        brug: [
          {
            // Ekstraherer CSS til en separat fil og bruger
            // definerede konfigurationer i afsnittet 'plugins'
            loader: MiniCssExtractPlugin.loader
          },
          {
            // Fortolker CSS
            loader: "css-loader",
            muligheder: {
              importLoaders: 2
            }
          },
          {
            // Brug PostCSS til at minimere og autoprefix med leverandørregler
            // for ældre browserkompatibilitet
            loader: "postcss-loader",
            muligheder: {
              ident: "postcss",
// Vi instruerer PostCSS om autoprefix og minimerer vores
              // CSS i produktionsfunktion, ellers gør det ikke
              // hvad som helst.
              plugins: devMode
                ? () => []
                : () => [
                    postcssPresetEnv ({
                      // Kompiler vores CSS-kode til understøttelse af browsere
                      // der bruges i mere end 1% af
                      // global markedsbrowser-andel. Du kan ændre
                      // mål browsere efter dine behov
                      // ved hjælp af understøttede forespørgsler.
                      // https://github.com/browserslist/browserslist#queries
                      browsere: ["> 1%"]
                    }),
                    kræve ( "cssnano") ()
                  ]
            }
          },
          {
            // Tilføjer support til Sass-filer, hvis du bruger Mindre, så
            // Brug mindre-loader
            loader: "sass-loader"
          }
        ]
      },
      {
        // Tilføjer support til at indlæse billeder i dine CSS-regler. Det ser ud til
        // .png, .jpg, .jpeg og .gif
        test: /\.(png|jpe?g|gif)$/,
        brug: [
          {
            loader: "fil-loader",
            muligheder: {
              // Billedet navngives med det originale navn og
              // udvidelse
              navn: "[navn]. [ext]",
// Angiver, hvor billederne er gemt og skal bruges
              // denne sti, når der genereres CSS-filer.
              // Eksempel, i site.scss har jeg
              // url ('../ wwwroot / images / pattern.png') og når der genereres
              // CSS-filen, fillæsseren udsendes som
              // url (../billeder / mønster.png), som er relativ
              // til '/css/site.css'
              publicPath: "../images",
// Når denne indstilling er 'sand', udsender loader
              // billede til output.path
              emitFile: falsk
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // Konfigurationsindstillinger for MiniCssExtractPlugin. Her er jeg kun
    // angiver, hvad CSS-outputfilnavnet skal være, og
    // stedet
    nye MiniCssExtractPlugin ({
      filnavn: devMode? "css / site.css": "css / site.min.css"
    })
  ]
};

Se kommentarerne i koden for at forstå konfigurationen. (Mere læselig fil her.)

Nu skal vi oprette nogle bindinger i Task Runner Explorer. Naviger til Vis -> Andet Windows -> Task Runner Explorer. Vinduet vises nederst, og du vil se de scripts, du oprettede i package.json, der er anført der under Custom. Du vil også se nogle opgaver under Standardindstillinger, men du kan bare ignorere dem.

Vi har brug for to bindinger:

  • Højreklik build -> Bindinger -> Before Build - Visual Studio kører denne opgave før hver build. Husk, at dette npm-script kører Webpack til produktion og optimerer CSS-filen.
  • Højreklik på dev -> Bindinger -> Project Open - Visual Studio kører denne opgave, når du åbner projektet. Husk, at dette npm-script kører Webpack i ur-tilstand og vil se efter eventuelle ændringer i dine Sass-filer og udsende den behandlede CSS-fil.

Task Runner Explorer skal se sådan ud:

Task Runner Explorer

Bemærk: Af en eller anden grund mislykkes Visual Studio undertiden dev-opgaven, når projektet åbnes. Hvis det sker, skal du bare åbne Task Explorer og køre opgaven manuelt.

Du kan hente den fulde kode fra GitHub-arkivet.

Afsluttende tanker

Og det er alt, hvad der er for det. Da du allerede har Visual Studio åben, kører ingen af ​​opgaverne. Gå foran og højreklik på dev-opgaven, og vælg Kør. Du vil se opgaven indlæses, og når den er færdig, vil du se, at en site.css-fil blev oprettet under wwwroot / css-biblioteket. Åbn site.scss, foretag en ændring og gem den. Åbn nu site.css, du vil se din ændring afspejles der. Fedt nok!!

Kør dit projekt ved at trykke på Ctrl + F5, du vil se en site.min.css fil oprettet under wwwroot / css bibliotek. Denne fil blev oprettet, da Task Runner kørte build-scriptet, før den byggede projektet.

Det endelige websted skal se sådan ud:

Endelig side

Jeg ved, jeg ved, baggrunden er meget osteagtig ... men jeg havde brug for et billede for at vise Webpack fillæsser i aktion.

Med denne konfiguration kan du endda tilføje support til transpilering af moderne JavaScript (ES6 +) til ES5. Se nærmere på disse: @ babel / core, babel-loader, @ babel / preset-env.

Tak for at du læste, og jeg håber du nød det. Hvis du har spørgsmål, forslag eller rettelser, fortæl mig det i kommentarerne herunder. Glem ikke at give denne artikel en del, og du kan følge mig på Twitter, GitHub, Medium, LinkedIn.

Du kan også besøge min personlige blogside.

Opdatering 8/25/19: Jeg har opbygget en bønnetweb app kaldet “My Quiet Time - A Prayer Journal”. Hvis du ønsker at blive i løkken, skal du tilmelde dig via følgende link: http://b.link/mqt

Appen frigives inden årets udgang, jeg har store planer for denne app. Følg følgende link for at se nogle skærmbilleder af mockup: http://pc.cd/Lpy7

Mine DM'er på Twitter er åbne, hvis du har spørgsmål til appen