Πώς να μεταγλωττίσετε αρχεία Sass στο Visual Studio και στο Webpack

Το Sass είναι ένας πολύ δημοφιλής προεπεξεργαστής CSS. Ο σκοπός αυτού του σεμιναρίου είναι να σας δείξει πώς να μεταγλωττίσετε αρχεία Sass στο Visual Studio χρησιμοποιώντας το Webpack. Η συζήτησή μας θα περιλαμβάνει ελαχιστοποίηση και αυτόματη επιδιόρθωση για παραγωγή.

Σίγουρα, υπάρχουν κάποιες προσθήκες στο Visual Studio Marketplace και μπορεί να είναι ωραίο να εγκαταστήσετε μια προσθήκη και να ξεχάσετε τη διαμόρφωση. Αλλά τι θα συμβεί εάν η προσθήκη δεν υποστηρίζεται πλέον και σταματήσει να λειτουργεί με νεότερες εκδόσεις Visual Studio; Λοιπόν, πολύ κακό. Αυτό συμβαίνει με ένα από τα πιο δημοφιλή πρόσθετα μεταγλωττιστών στην αγορά.

Ρυθμίζοντας μόνοι σας τη συλλογή, θα έχετε τον απόλυτο έλεγχο της εξόδου. Επίσης, τα προθέματα προμηθευτών θα προστεθούν αυτόματα στους κανόνες CSS σας. Πόσο δροσερό είναι αυτό;

Προαπαιτούμενα

Θα πρέπει να έχετε εγκατεστημένο τον κόμβο και μπορείτε να το πάρετε εδώ. Αυτό είναι πραγματικά. Θα χρειαστείτε επίσης npm, αλλά θα εγκατασταθεί επίσης με το Node.

Δημιουργία του έργου

Σημείωση: Θα δημιουργήσουμε μια εφαρμογή .NET Core MVC, αλλά οι ίδιες αρχές ισχύουν για οποιαδήποτε εφαρμογή ASP.NET MVC. Θα χρειαστεί απλώς να τροποποιήσετε λίγο τη διαμόρφωση του Webpack για να εξάγετε το αρχείο CSS στον Contentκατάλογο.

Ανοίξτε το Visual Studio και δημιουργήστε μια νέα εφαρμογή Web Core ASP.NET και , στη συνέχεια, επιλέξτε Εφαρμογή Web (Μοντέλο-Προβολή-Ελεγκτής) . Ονομάζω το έργο μου netcore-sass-webpack .

Δημιουργήστε ένα Stylesφάκελο στη ρίζα του έργου. Μέσα σε αυτό, δημιουργήστε ένα αρχείο Sass και ονομάστε το site.scss. Ανοίξτε αυτό το νέο αρχείο Sass και αντιγράψτε τα εξής:

/* 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; } }

Θα παρατηρήσετε ότι αυτό είναι το ίδιο CSS που παρέχεται από το Visual Studio όταν δημιουργήσαμε το έργο, με εξαίρεση τον backgroundκανόνα στην bodyετικέτα. Τώρα διαγράψτε το παρεχόμενο CSS που βρίσκεται κάτω από wwwroot/css(και τα δύο αρχεία: site.cssκαι site.min.css). Μην ανησυχείτε, θα τα δημιουργήσουμε αυτόματα με το Webpack.

Τώρα, κατεβάστε το pattern.png και τοποθετήστε το κάτω wwwroot/images.

Δημιουργήστε ένα κενό αρχείο JavaScript κάτω από τη ρίζα της εφαρμογής και ονομάστε το webpack.config.js. Θα το φροντίσουμε αργότερα. Θα πρέπει να καταλήξετε στην ακόλουθη δομή έργου:

Σημείωση: Δεν χρειάζεται να κάνετε τα ακόλουθα δύο βήματα για κάθε έργο, μόνο μία φορά (εκτός εάν απεγκαταστήσετε και επανεγκαταστήσετε το Visual Studio).

Θα πρέπει να δώσετε στο Visual Studio τη διαδρομή εγκατάστασης του κόμβου. Επιστρέψτε στο έργο σας και επιλέξτε Εργαλεία -> Επιλογές στα αριστερά Έργα και Λύσεις -> Διαχείριση πακέτου Ιστού και προσθέστε τη διαδρομή στην εγκατάσταση κόμβων στην κορυφή των ist ( C:\Program Files\κόμβων l js or C:\Program Files (x86)\, ανάλογα με το εάν έχετε εγκαταστήσει το x64 ή x86 εκδοχή).

Τέλος, κατεβάστε το NPM Task Runner και εγκαταστήστε το - αλλά θα πρέπει πρώτα να κλείσετε το Visual Studio.

Εξαρτήσεις Webpack και NPM

Ανοίξτε τη γραμμή εντολών και μεταβείτε στη ρίζα του έργου και εγκαταστήστε τις απαραίτητες εξαρτήσεις:

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

Η πρώτη npmεντολή προετοιμάζει τη δική σας package.jsonκαι η δεύτερη εγκαθιστά τις εξαρτήσεις σας.

  • webpack, webpack-cli - Μονάδα δέσμης στοιχείων
  • node- sass - Συνδέσεις για κόμβους σε LibSass; παρέχει υποστήριξη για το Sass
  • postcss-loader, postcss-preset-env - PostCSS loader για Webpack για επεξεργασία αυτόματης επιδιόρθωσης και ελαχιστοποίησης
  • sass-loader, css-loader - Το Webpack χρειάζεται συγκεκριμένους φορτωτές για την υποστήριξη Sass και CSS
  • cssnano - Ελαχιστοποιητής CSS
  • mini-css-extract-plugin - Εξάγει το CSS σε ξεχωριστό αρχείο
  • cross-env - Παρέχει υποστήριξη στους χρήστες των Windows για μεταβλητές περιβάλλοντος. Θα χρησιμοποιήσουμε τη μεταβλητή NODE_ENVenvironment
  • file-loader - Παρέχει υποστήριξη για αρχεία (εικόνες) στους κανόνες CSS

Σε αυτό το σημείο μπορείτε να ανοίξετε ξανά το έργο στο Visual Studio. Αφού ολοκληρωθεί η φόρτωση του έργου, ανοίξτε package.jsonκαι προσθέστε τα ακόλουθα σενάρια:

"scripts": { "dev": "webpack --watch", "build": "cross-env NODE_ENV=production webpack" },
  • dev - Θα δεσμεύσουμε αυτό το σενάριο κάθε φορά που ανοίγει το έργο και το Webpack θα παρακολουθεί συνεχώς τις αλλαγές στα αρχεία Sass προέλευσης, θα τα μεταγλωττίζει και θα εξάγει το ξεχωριστό αρχείο CSS
  • build - Θα δεσμεύσουμε αυτό το σενάριο πριν από κάθε κατασκευή έργου και θα δημιουργήσουμε το αρχείο CSS παραγωγής, συμπεριλαμβανομένης της ελαχιστοποίησης και της αυτόματης επιδιόρθωσης

Σημείωση: Τα σενάρια NPM θα εκτελούνται αυτόματα χρησιμοποιώντας το παράθυρο Task Runner . Περισσότερα για αυτό αργότερα.

Ήρθε η ώρα να εργαστούμε για τη διαμόρφωση του Webpack. Ανοίξτε webpack.config.jsκαι αντιγράψτε τα εξής:

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" }) ] };

Ανατρέξτε στα σχόλια στον κώδικα για να κατανοήσετε τη διαμόρφωση. (Το πιο αναγνώσιμο αρχείο εδώ.)

Τώρα πρέπει να δημιουργήσουμε κάποιες συνδέσεις στον Task Runner Explorer . Πλοηγηθείτε στην Προβολή -> Άλλα Windows -> Εργαλείο εκτέλεσης εργασιών. Το παράθυρο θα εμφανιστεί στο κάτω μέρος και θα δείτε τα σενάρια που δημιουργήσατε να package.jsonαναφέρονται εκεί κάτω από το Custom. Θα δείτε επίσης κάποιες εργασίες στο De Faults, αλλά μπορείτε απλά να τις αγνοήσετε.

Χρειαζόμαστε δύο δεσμεύσεις:

  • Κάντε δεξί κλικ στο build -> Bindings -> Before Build - Το Visual Studio θα εκτελέσει αυτήν την εργασία πριν από κάθε έκδοση. Θυμηθείτε ότι αυτό το σενάριο npm εκτελεί το Webpack για παραγωγή και θα βελτιστοποιήσει το αρχείο CSS.
  • Δεξί κλικ dev -> Bindings -> Projec t Open - Το Visual Studio θα εκτελέσει αυτήν την εργασία όταν ανοίγετε το έργο. Θυμηθείτε ότι αυτό το σενάριο npm εκτελεί το Webpack σε λειτουργία παρακολούθησης και θα παρακολουθεί τυχόν αλλαγές στα αρχεία Sass και θα εξάγει το επεξεργασμένο αρχείο CSS.

Το Task Runner Explorer θα πρέπει να μοιάζει με αυτό:

Σημείωση: Για κάποιο λόγο, το Visual Studio μερικές φορές θα αποτύχει να ξεκινήσει την εργασία dev κατά το άνοιγμα του έργου. Εάν συμβεί αυτό, απλώς ανοίξτε την Εξερεύνηση εργασιών και εκτελέστε την εργασία χειροκίνητα.

Μπορείτε να λάβετε τον πλήρη κώδικα από το αποθετήριο GitHub.

Τελικές σκέψεις

Και αυτό είναι όλο. Δεδομένου ότι έχετε ήδη ανοιχτό το Visual Studio, καμία από τις εργασίες δεν εκτελείται. Προχωρήστε και κάντε δεξί κλικ στην εργασία dev και επιλέξτε εκτέλεση. Θα δείτε τη φόρτωση της εργασίας και όταν τελειώσει θα δείτε ότι ένα site.cssαρχείο δημιουργήθηκε κάτω από τον wwwroot/cssκατάλογο. Ανοίξτε site.scss, κάντε μια αλλαγή και αποθηκεύστε την. Τώρα ανοιχτό site.css, θα δείτε την αλλαγή σας να εμφανίζεται εκεί. Δροσερός!!

Εκτελέστε το έργο σας πατώντας Ctrl + F5 , θα δείτε ένα site.min.cssαρχείο που δημιουργήθηκε κάτω από τον wwwroot/cssκατάλογο. Αυτό το αρχείο δημιουργήθηκε όταν ο Task Runner έτρεξε το buildσενάριο πριν δημιουργήσει το έργο.

Ο τελικός ιστότοπος πρέπει να έχει την εξής μορφή:

Ξέρω, το ξέρω, το φόντο είναι πολύ τυρό… αλλά χρειαζόμουν μια εικόνα για να δείξω το Webpack file-loaderσε δράση.

Με αυτήν τη διαμόρφωση, μπορείτε ακόμη και να προσθέσετε υποστήριξη για τη μεταφορά σύγχρονου JavaScript (ES6 +) στο ES5. Κοιτάξτε σε αυτά: @babel/core, babel-loader, @babel/preset-env.

Ευχαριστώ που διαβάσατε και ελπίζω να σας άρεσε. Εάν έχετε οποιεσδήποτε ερωτήσεις, προτάσεις ή διορθώσεις, ενημερώστε μας στα παρακάτω σχόλια. Μην ξεχάσετε να μοιραστείτε αυτό το άρθρο και μπορείτε να με ακολουθήσετε στο Twitter, GitHub, Medium, LinkedIn.

Μπορείτε επίσης να επισκεφθείτε τον προσωπικό μου ιστότοπο blogging.

Ενημέρωση 8/25/19: Έχω δημιουργήσει μια εφαρμογή ιστού προσευχής που ονομάζεται " Ο ήσυχος χρόνος μου - ένα περιοδικό προσευχής " Εάν θέλετε να μείνετε ενημερωμένοι, εγγραφείτε μέσω του παρακάτω συνδέσμου: //b.link/mqt  

Η εφαρμογή θα κυκλοφορήσει πριν από το τέλος του έτους, έχω μεγάλα σχέδια για αυτήν την εφαρμογή. Για να δείτε μερικά εικονίδια οθόνης ακολουθήστε τον παρακάτω σύνδεσμο: //pc.cd/Lpy7

Τα DM μου στο Twitter είναι ανοιχτά εάν έχετε απορίες σχετικά με την εφαρμογή;