Kuinka koota Sass-tiedostot Visual Studiossa ja Webpackissa

Sass on erittäin suosittu CSS-esiprosessori. Tämän opetusohjelman tarkoituksena on näyttää, kuinka Sass-tiedostot kootaan Visual Studiossa Webpackin avulla. Keskustelumme sisältää tuotannon minimoinnin ja automaattisen korjaamisen.

Toki Visual Studio Marketplacessa on joitain laajennuksia, ja voi olla mukavaa asentaa vain laajennus ja unohtaa määritykset. Mutta mitä tapahtuu, jos laajennusta ei enää tueta ja se lakkaa toimimasta uudempien Visual Studio -versioiden kanssa? No, liian huono. Tämä pätee yhteen markkinoiden suosituimmista kääntäjälaajennuksista.

Konfiguroimalla kokoelma itse, sinulla on täydellinen hallinnan tulos. Myös toimittajan etuliitteet lisätään automaattisesti CSS-sääntöihisi. Kuinka siistiä?

Edellytykset

Sinulla on oltava Node asennettuna, ja voit napata sen täältä. Se on todella. Tarvitset myös npm, mutta se asennetaan myös Noden kanssa.

Projektin luominen

Huomaa: Luomme .NET Core MVC -sovelluksen, mutta samat periaatteet pätevät kaikkiin ASP.NET MVC -sovelluksiin. Sinun tarvitsee vain muokata Webpack-kokoonpanoa hieman, jotta CSS-tiedosto voidaan lähettää Contenthakemistoon.

Avaa Visual Studio ja luo uusi ASP.NET-ydinverkkosovellus ja valitse sitten Verkkosovellus (Model-View-Controller) . Nimetän projektini netcore-sass-webpack .

Luo Styleskansio projektin juuressa. Luo sen sisällä Sass-tiedosto ja nimeä se site.scss. Avaa tämä uusi Sass-tiedosto ja kopioi seuraava:

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

Huomaat, että tämä on sama CSS, jonka Visual Studio tarjoaa projektia luodessamme, lukuun ottamatta tagin backgroundsääntöä body. Poista nyt toimitettu CSS, joka sijaitsee wwwroot/css(molemmat tiedostot: site.cssja site.min.css) -kohdassa . Älä huoli, me luomme nämä automaattisesti Webpackilla.

Lataa nyt pattern.png ja aseta se alle wwwroot/images.

Luo tyhjä JavaScript-tiedosto sovelluksen juurelle ja nimeä se webpack.config.js. Hoidamme tämän myöhemmin. Sinun pitäisi päätyä seuraavaan projektirakenteeseen:

Huomaa: Sinun ei tarvitse tehdä seuraavia kahta vaihetta jokaiselle projektille vain kerran (ellet poista Visual Studion asennusta ja asenna sitä uudelleen).

Sinun on toimitettava Visual Studiolle Solmun asennuspolku. Palaa takaisin projektiisi ja valitse Työkalut -> Optiot vasemmalla puolella Projektit ja ratkaisut -> Verkkopakettien hallinta ja lisää polku solmun asennukseen l ist ( C:\Program Files\solmun solmujen js or C:\Program Files (x86)\yläosaan, riippuen siitä, asennitko x64 vai x86 versio).

Lataa lopuksi NPM Task Runner ja asenna se - mutta sinun on ensin suljettava Visual Studio.

Webpack ja NPM-riippuvuudet

Avaa komentokehote, siirry projektin juuriin ja asenna tarvittavat riippuvuudet:

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

Ensimmäinen npmkomento alustaa käyttäjän package.jsonja toinen asentaa riippuvuutesi.

  • webpack, webpack-cli - Moduulipaketti
  • node-sass - Solmun sidonnat LibSassiin; tarjoaa tukea Sassille
  • postcss-loader, postcss-preset-env - PostCSS-latausohjelma Webpackille automaattisen korjauksen ja pienentämisen käsittelemiseksi
  • sass-loader, css-loader - Webpack tarvitsee erityisiä kuormaajia tukemaan Sassia ja CSS: ää
  • cssnano - CSS-minisoitin
  • mini-css-extract-plugin - Pura CSS erilliseen tiedostoon
  • cross-env - Tarjoaa tukea Windows-käyttäjille ympäristömuuttujille. Käytämme NODE_ENVenvironment-muuttujaa
  • file-loader - Tarjoaa tukea CSS-sääntöjemme tiedostoille (kuville)

Tässä vaiheessa voit avata projektin uudelleen Visual Studiossa. Kun projekti on latautunut, avaa package.jsonja lisää seuraavat komentosarjat:

"scripts": { "dev": "webpack --watch", "build": "cross-env NODE_ENV=production webpack" },
  • dev - Sitomme tämän komentosarjan aina, kun projekti avautuu, ja Webpack seuraa jatkuvasti Sass-lähdetiedostojen muutoksia, kääntää ne ja tuottaa erillisen CSS-tiedoston
  • koontiversio - Sitomme tämän komentosarjan ennen jokaista projektin koontia ja tuotamme tuotannon CSS-tiedoston, mukaan lukien pienentäminen ja automaattinen korjaus

Huomautus: NPM-komentosarjat suoritetaan automaattisesti Task Runner -ikkunassa. Lisää siitä myöhemmin.

On aika työskennellä Webpack-kokoonpanomme kanssa. Avaa webpack.config.jsja kopioi seuraavat:

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

Katso koodin kommentit ymmärtääksesi kokoonpanon. (Luettavampi tiedosto täällä.)

Nyt meidän on luotava joitain sidoksia Task Runner Exploreriin . Siirry kohtaan Näytä -> Muu Windows -> Tehtävän juoksijan Exp lorer. Ikkuna näkyy alareunassa ja näet luomasi komentosarjat, package.jsonjotka on lueteltu siellä Mukautettu- kohdassa . Näet myös joitain tehtäviä De viat -kohdassa, mutta voit vain ohittaa ne.

Tarvitsemme kaksi sidosta:

  • Napsauta hiiren kakkospainikkeella koontiversiota -> Sidonnat -> Ennen koontia - Visual Studio suorittaa tämän tehtävän ennen jokaista koontiversiota. Muista, että tämä npm-komentosarja ajaa Webpackin tuotantoa varten ja optimoi CSS-tiedoston.
  • Napsauta hiiren kakkospainikkeella dev -> Sidonnat -> Projec t Open - Visual Studio suorittaa tämän tehtävän, kun avaat projektin. Muista, että tämä npm-komentosarja suorittaa Webpack-toiminnon katselutilassa ja seuraa mahdollisia muutoksia Sass-tiedostoissasi ja antaa käsitellyn CSS-tiedoston.

Task Runner Explorerin pitäisi näyttää tältä:

Huomaa: Jostain syystä Visual Studio ei joskus onnistu aloittamaan kehitystehtävää projektin avaamisen yhteydessä. Jos näin tapahtuu, avaa vain Tehtävienhallinta ja suorita tehtävä manuaalisesti.

Saat koko koodin GitHub-arkistosta.

Lopulliset ajatukset

Ja siinä kaikki on liian. Koska Visual Studio on jo auki, yksikään tehtävistä ei ole käynnissä. Menkää ja oikealla painikkeella dev tehtävää ja valitse Suorita. Näet tehtävän latautumisen ja kun se on valmis, huomaat, että site.csstiedosto luotiin wwwroot/csshakemistoon. Avaa site.scss, tee muutos ja tallenna se. Nyt auki site.css, näet muutoksesi heijastuvan siellä. Viileä!!

Suorita projekti painamalla Ctrl + F5 , näet hakemistoon site.min.cssluodun tiedoston wwwroot/css. Tämä tiedosto on luotu, kun Task juoksija juoksibuild kirjoitus ennen sen rakennettu hankkeen.

Lopullisen sivuston tulisi näyttää tältä:

Tiedän, tiedän, tausta on hyvin juustoa ... mutta tarvitsin kuvan, jotta Webpack näkyisi file-loadertoiminnassa.

Tämän kokoonpanon avulla voit jopa lisätä tukea modernin JavaScriptin (ES6 +) siirtämiseen ES5: een. Tutkivani: @babel/core, babel-loader, @babel/preset-env.

Kiitos lukemisesta, ja toivon, että pidit siitä. Jos sinulla on kysyttävää, ehdotuksia tai korjauksia, ilmoita siitä alla olevissa kommenteissa. Älä unohda antaa tämän artikkelin osuutta, ja voit seurata minua Twitterissä, GitHubissa, Mediumissa, LinkedInissä.

Voit myös käydä henkilökohtaisella blogisivustollani.

Päivitys 25.8.19: Olen rakentanut rukousverkkosovelluksen nimeltä " My Quiet Time - A Prayer Journal ". Jos haluat pysyä silmukassa, kirjaudu sisään seuraavan linkin kautta: //b.link/mqt  

Sovellus julkaistaan ​​ennen vuoden loppua, minulla on suuria suunnitelmia tälle sovellukselle. Jos haluat nähdä joitain kuvakaappauksia, seuraa seuraavaa linkkiä: //pc.cd/Lpy7

Twitterissä olevat DM-tietoni ovat auki, jos sinulla on kysyttävää sovelluksesta?