Cum să compilați fișiere Sass în Visual Studio și Webpack

Sass este un pre-procesor CSS foarte popular. Intenția acestui tutorial este de a vă arăta cum să compilați fișiere Sass în Visual Studio utilizând Webpack. Discuția noastră va include reducerea și autoprefixarea pentru producție.

Sigur, există unele plugin-uri în Visual Studio Marketplace și poate fi frumos să instalați doar un plug-in și să uitați de configurare. Dar ce se întâmplă dacă pluginul nu mai este acceptat și nu mai funcționează cu versiunile mai noi de Visual Studio? Păcat. Acesta este cazul cu unul dintre cele mai populare pluginuri de compilare de pe piață.

Configurând personal compilația, veți avea control total asupra rezultatului. De asemenea, prefixele furnizorului vor fi adăugate automat la regulile dvs. CSS. Cat de tare e asta?

Condiții prealabile

Va trebui să aveți Node instalat și îl puteți apuca Aici. Asta este cu adevărat. De asemenea, veți avea nevoie de npm, dar va fi instalat și cu Node.

Crearea proiectului

Notă: Vom crea o aplicație .NET Core MVC, dar aceleași principii se aplică oricărei aplicații ASP.NET MVC. Trebuie doar să modificați puțin configurația Webpack pentru a transmite fișierul CSS la Content director.

Deschideți Visual Studio și creați un nou Aplicație web ASP.NET Core, apoi selectați Aplicație Web (Model-View-Controller). Îmi numesc proiectul netcore-sass-webpack.

Creeaza o Styles folder din rădăcina proiectului. În interiorul acestuia, creați un fișier Sass și denumiți-l site.scss. Deschideți acest nou fișier Sass și copiați următoarele:

/* Please see documentation at https://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;
    }
}

Veți observa că acesta este același CSS furnizat de Visual Studio atunci când am creat proiectul, cu excepția background regula în body etichetă. Acum ștergeți CSS-ul furnizat situat sub wwwroot/css (ambele fișiere: site.css și site.min.css). Nu vă faceți griji, le vom genera automat cu Webpack.

Acum, descărcați pattern.png și așezați-l sub wwwroot/images.

Creați un fișier JavaScript gol sub rădăcina aplicației și denumiți-l webpack.config.js. Ne vom ocupa de asta mai târziu. Ar trebui să ajungeți la următoarea structură a proiectului:

Notă: Nu trebuie să faceți următorii doi pași pentru fiecare proiect, o singură dată (cu excepția cazului în care dezinstalați și reinstalați Visual Studio).

Va trebui să furnizați Visual Studio calea de instalare a nodului. Reveniți la proiectul dvs. și selectați Instrumente -> Options în stânga pane Proiecte și soluții -> Web Package Management și adăugați calea la instalarea nodului în partea de sus a list ( C:Program Filesnoduljs or C:Program Files (x86)nodejs, în funcție de instalarea versiunii x64 sau x86).

În cele din urmă descărcați NPM Task Runner și instalați-l – dar va trebui mai întâi să închideți Visual Studio.

Dependențe Webpack și NPM

Deschis Prompt de comandă și navigați la rădăcina proiectului și instalați dependențele necesare:

cd netcore-sass-webpacknetcore-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

Primul npm comanda inițializează package.json iar al doilea instalează dependențele.

• webpack, webpack-cli – Pachet de module
• nod-sass – Legături pentru Node la LibSass; oferă asistență pentru Sass
• postcss-loader, postcss-preset-env – Încărcător PostCSS pentru Webpack pentru a procesa autoprefixarea și minimizarea
• sass-loader, css-loader – Webpack are nevoie de încărcătoare specifice pentru a sprijini Sass și CSS
• cssnano – Minifier CSS
• mini-css-extract-plugin – Extrage CSS într-un fișier separat
• încrucișat – Oferă suport utilizatorilor Windows pentru variabilele de mediu. Vom folosi variabila NODE_ENVenvironment
• încărcător de fișiere – Oferă suport pentru fișiere (imagini) în regulile noastre CSS

În acest moment puteți redeschide proiectul în Visual Studio. După ce proiectul se termină de încărcat, deschideți package.json și adăugați următoarele scripturi:

"scripts": {
    "dev": "webpack --watch",
    "build": "cross-env NODE_ENV=production webpack"
  },

• dev – Vom lega acest script ori de câte ori se deschide proiectul și Webpack va urmări continuu modificările fișierelor Sass sursă, le va compila și va scoate fișierul CSS separat.
• construi – Vom lega acest script înainte de fiecare construire a proiectului și vom produce fișierul CSS de producție, inclusiv minificare și autoprefixare

Notă: Scripturile NPM vor rula automat folosind Task Runner fereastră. Mai multe despre asta mai târziu.

Este timpul să lucrăm la configurația noastră Webpack. Deschis webpack.config.js și copiați următoarele:

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.
                      // https://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"
    })
  ]
};

Consultați comentariile din cod pentru a înțelege configurația. (Fișier mai lizibil Aici.)

Acum trebuie să creăm câteva legături în Task Runner Explorer. Navigheaza catre Vizualizare -> Alte Windows -> Task Runner Explorer. Fereastra se va afișa în partea de jos și veți vedea scripturile pe care le-ați creat package.json enumerate acolo sub Personalizat. Veți vedea și câteva sarcini sub Dedefecte, dar le puteți ignora.

Avem nevoie de două legături:

• Click dreapta build -> Bindings -> Înainte Build – Visual Studio va rula această sarcină înainte de fiecare build. Amintiți-vă că acest script npm rulează Webpack pentru producție și va optimiza fișierul CSS.
• Click dreapta dev -> Legături -> Proiectt Deschidere – Visual Studio va rula această sarcină când deschideți proiectul. Amintiți-vă că acest script npm rulează Webpack în modul ceas și voi urmăriți orice modificare a fișierelor dvs. Sass și scoateți fișierul CSS procesat.

Task Runner Explorer ar trebui să arate așa:

Notă: Din anumite motive, Visual Studio uneori nu va reuși să pornească dev sarcina la deschiderea proiectului. Dacă se întâmplă acest lucru, deschideți Task Explorer și rulați manual sarcina.

Puteți obține codul complet de la Depozitul GitHub.

Gânduri finale

Și atât este tot. Deoarece aveți deja Visual Studio deschis, niciuna dintre sarcini nu se execută. Mergeți înainte și Click dreapta dev sarcină și selectați rulați. Veți vedea sarcina de încărcare și când se termină veți vedea că a site.css fișierul a fost creat sub wwwroot/css director. Deschis site.scss, faceți o modificare și salvați-o. Acum deschis site.css, veți vedea schimbarea dvs. reflectată acolo. Misto!!

Rulați proiectul apăsând Ctrl + F5, veți vedea o site.min.css fișier creat sub wwwroot/css director. Acest fișier a fost creat atunci când Task Runner a fugit build script înainte de a construi proiectul.

Site-ul final ar trebui să arate astfel:

Știu, știu, fundalul este foarte brânză … dar aveam nevoie de o imagine pentru a arăta Webpack-ul file-loader în acțiune.

Cu această configurație, puteți chiar să adăugați suport pentru transpile JavaScript moderne (ES6 +) la ES5. Uită-te la acestea: @babel/core, babel-loader, @babel/preset-env.

Vă mulțumesc pentru lectură și sper că v-a plăcut. Dacă aveți întrebări, sugestii sau corecții, anunțați-mă în comentariile de mai jos. Nu uitați să transmiteți acest articol și puteți să mă urmați mai departe Stare de nervozitate, GitHub, Mediu, LinkedIn.

Puteți vizita, de asemenea, personalul meu site de blog.

Actualizare 25.08.19: Am construit o aplicație web de rugăciune numită „Timpul meu liniștit – Un jurnal de rugăciune“. Dacă doriți să rămâneți în buclă, vă rugăm să vă înscrieți prin următorul link: http://b.link/mqt

Aplicația va fi lansată înainte de sfârșitul anului, am planuri mari pentru această aplicație. Pentru a vedea câteva capturi de ecran cu machete, urmați următorul link: http://pc.cd/Lpy7

DM-urile mele Stare de nervozitate sunt deschise dacă aveți întrebări cu privire la aplicație?