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

Sass er en meget populær CSS-forprocessor. Hensigten med denne vejledning er at vise dig, hvordan du kompilerer Sass-filer i Visual Studio ved hjælp af Webpack. Vores diskussion vil omfatte minificering og autoprefixing til produktion.

Sikker på, der er nogle plugins på 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'et ikke understøttes længere og holder op med at arbejde med nyere Visual Studio-versioner? Nå, alt for dårlig. Dette er tilfældet med et af de mest populære compiler-plugins på markedet.

Ved at konfigurere kompileringen selv har du total kontrol over output. Også sælgerpræfikser føjes automatisk til dine CSS-regler. Hvor sejt er det?

Forudsætninger

Du skal have Node installeret, og du kan få fat i den her. Det er det virkelig. Du skal også bruge 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 en lille smule for at sende CSS-filen til Contentbiblioteket.

Åbn Visual Studio, og opret et nyt ASP.NET Core-webapplikation , og vælg derefter Webapplikation (Model-View-Controller) . Jeg navngiver mit projekt netcore-sass-webpack .

Opret en Stylesmappe inden for projektets rod. Inde i den skal du oprette en Sass-fil og navngive den site.scss. Åbn denne nye Sass-fil og kopier følgende:

/* Please see documentation at //docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ for details on configuring this project to bundle and minify static web assets. */ body { padding-top: 50px; padding-bottom: 20px; background: #D69655 url('../wwwroot/images/pattern.png') repeat; } /* Wrapping element */ /* Set some basic padding to keep content from hitting the edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* Carousel */ .carousel-caption p { font-size: 20px; line-height: 1.4; } /* Make .svg files in the carousel display properly in older browsers */ .carousel-inner .item img[src$=".svg"] { width: 100%; } /* QR code generator */ #qrCode { margin: 15px; } /* Hide/rearrange for smaller screens */ @media screen and (max-width: 767px) { /* Hide captions */ .carousel-caption { display: none; } }

Du vil bemærke, at dette er den samme CSS, som Visual Studio leverede, da vi oprettede projektet, med undtagelse af backgroundreglen i bodykoden. Slet nu den medfølgende CSS under wwwroot/css(begge filer: site.cssog site.min.css). Bare rolig, vi genererer disse automatisk med Webpack.

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

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

Bemærk: Du behøver ikke udføre følgende to trin for hvert projekt, kun en gang (medmindre du afinstallerer og geninstallerer Visual Studio).

Du bliver nødt til at give Visual Studio stien til installationsinstallationen. Gå tilbage til dit projekt, og vælg Værktøjer -> Valgmuligheder til venstre Projekter og løsninger -> Webpakkehåndtering og tilføj stien til Nodeinstallation øverst på ist ( C:\Program Files\node js or C:\Program Files (x86)\nodejs, afhængigt af om du har installeret x64 eller x86 version).

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 init -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 file-loader

Den første npmkommando initialiserer din package.jsonog den anden installerer dine afhængigheder.

  • webpack, webpack-cli - Modulbundler
  • node-sass - Bindinger til node til LibSass; yder support til Sass
  • postcss-loader, postcss-preset-env - PostCSS loader til Webpack til at behandle autoprefixing 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 - Uddrager CSS til en separat fil
  • cross-env - Giver support til Windows-brugere til miljøvariabler. Vi bruger NODE_ENVenvironment-variablen
  • file-loader - Giver support til filer (billeder) i vores CSS-regler

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

"scripts": { "dev": "webpack --watch", "build": "cross-env NODE_ENV=production webpack" },
  • dev - Vi binder dette script, hver gang projektet åbnes, og Webpack vil løbende se efter ændringer i Sass-kildefilerne, kompilere dem og sende den separate CSS-fil
  • build - Vi binder dette script før hver projektbygning og producerer CSS-produktionsfilen inklusive minifikation og autoprefixing

Bemærk: NPM-scripts kører 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.jsog kopier følgende:

const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const postcssPresetEnv = require("postcss-preset-env"); // We are getting 'process.env.NODE_ENV' from the NPM scripts // Remember the 'dev' script? const devMode = process.env.NODE_ENV !== "production"; module.exports = { // Tells Webpack which built-in optimizations to use // If you leave this out, Webpack will default to 'production' mode: devMode ? "development" : "production", // Webpack needs to know where to start the bundling process, // so we define the Sass file under './Styles' directory entry: ["./Styles/site.scss"], // This is where we define the path where Webpack will place // a bundled JS file. Webpack needs to produce this file, // but for our purposes you can ignore it output: { path: path.resolve(__dirname, "wwwroot"), // Specify the base path for all the styles within your // application. This is relative to the output path, so in // our case it will be './wwwroot/css' publicPath: "/css", // The name of the output bundle. Path is also relative // to the output path, so './wwwroot/js' filename: "js/sass.js" }, module: { // Array of rules that tells Webpack how the modules (output) // will be created rules: [ { // Look for Sass files and process them according to the // rules specified in the different loaders test: /\.(sa|sc)ss$/, // Use the following loaders from right-to-left, so it will // use sass-loader first and ending with MiniCssExtractPlugin use: [ { // Extracts the CSS into a separate file and uses the // defined configurations in the 'plugins' section loader: MiniCssExtractPlugin.loader }, { // Interprets CSS loader: "css-loader", options: { importLoaders: 2 } }, { // Use PostCSS to minify and autoprefix with vendor rules // for older browser compatibility loader: "postcss-loader", options: { ident: "postcss", // We instruct PostCSS to autoprefix and minimize our // CSS when in production mode, otherwise don't do // anything. plugins: devMode ? () => [] : () => [ postcssPresetEnv({ // Compile our CSS code to support browsers // that are used in more than 1% of the // global market browser share. You can modify // the target browsers according to your needs // by using supported queries. // //github.com/browserslist/browserslist#queries browsers: [">1%"] }), require("cssnano")() ] } }, { // Adds support for Sass files, if using Less, then // use the less-loader loader: "sass-loader" } ] }, { // Adds support to load images in your CSS rules. It looks for // .png, .jpg, .jpeg and .gif test: /\.(png|jpe?g|gif)$/, use: [ { loader: "file-loader", options: { // The image will be named with the original name and // extension name: "[name].[ext]", // Indicates where the images are stored and will use // this path when generating the CSS files. // Example, in site.scss I have // url('../wwwroot/images/pattern.png') and when generating // the CSS file, file-loader will output as // url(../images/pattern.png), which is relative // to '/css/site.css' publicPath: "../images", // When this option is 'true', the loader will emit the // image to output.path emitFile: false } } ] } ] }, plugins: [ // Configuration options for MiniCssExtractPlugin. Here I'm only // indicating what the CSS output file name should be and // the location new MiniCssExtractPlugin({ filename: 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 View -> Other Windows -> Task Runner Exp lorer. Vinduet vises nederst, og du vil se de scripts, du oprettede i, der er package.jsonanført under Brugerdefineret. Du vil også se nogle opgaver under De- fejl, men du kan bare ignorere dem.

Vi har brug for to bindinger:

  • Højreklik build -> Bindinger -> Før 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 dev -> Bindinger -> Projekt åben - Visual Studio kører denne opgave, når du åbner projektet. Husk, at dette npm-script kører Webpack i urtilstand og vil se efter eventuelle ændringer i dine Sass-filer og output den behandlede CSS-fil.

Task Runner Explorer skal se sådan ud:

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

Du kan få den fulde kode fra GitHub-arkivet.

Afsluttende tanker

Og det er alt der er også det. Da du allerede har Visual Studio åbent, kører ingen af ​​opgaverne. Gå videre og højreklikdev 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.cssfil blev oprettet under wwwroot/cssbiblioteket. Å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.cssfil oprettet under wwwroot/cssbiblioteket. Denne fil blev oprettet, da Task runner kørte den buildscriptet før det byggede projektet.

Det endelige sted skal se sådan ud:

Jeg ved, jeg ved, baggrunden er meget osteagtig ... men jeg havde brug for et billede for at vise Webpack file-loaderi aktion.

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

Tak fordi du læste, og jeg håber, du har haft det. Hvis du har spørgsmål, forslag eller rettelser, så lad mig det vide i kommentarerne nedenfor. 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 blogging-side.

Opdatering 25.8.19: Jeg har bygget en bøn-webapp kaldet " My Quiet Time - A Prayer Journal ". Hvis du gerne vil være i løkken, skal du tilmelde dig via følgende link: //b.link/mqt  

Appen frigives inden årets udgang, jeg har store planer for denne app. For at se nogle mockup-skærmbilleder skal du følge følgende link: //pc.cd/Lpy7

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