Cómo compilar archivos Sass en Visual Studio y Webpack

Sass es un preprocesador CSS muy popular. La intención de este tutorial es mostrarle cómo compilar archivos Sass dentro de Visual Studio usando Webpack. Nuestra discusión incluirá la minificación y el prefijo automático para la producción.

Claro, hay algunos complementos en Visual Studio Marketplace, y puede ser bueno simplemente instalar un complemento y olvidarse de la configuración. Pero, ¿qué sucede si el complemento ya no es compatible y deja de funcionar con las versiones más recientes de Visual Studio? Bueno, muy mal. Este es el caso de uno de los complementos de compilación más populares del mercado.

Al configurar la compilación usted mismo, tendrá un control total sobre la salida. Además, los prefijos de proveedores se agregarán automáticamente a sus reglas CSS. ¿Cuan genial es eso?

Prerrequisitos

Necesitará tener Node instalado, y puede obtenerlo aquí. Eso es realmente. También necesitará npm, pero también se instalará con Node.

Creando el Proyecto

Nota: Crearemos una aplicación .NET Core MVC, pero los mismos principios se aplican a cualquier aplicación ASP.NET MVC. Solo necesitaría modificar un poco la configuración de Webpack para enviar el archivo CSS al Contentdirectorio.

Abra Visual Studio y cree una nueva aplicación web ASP.NET Core , luego seleccione Aplicación web (Modelo-Vista-Controlador) . Estoy nombrando mi proyecto netcore-sass-webpack .

Crea una Stylescarpeta dentro de la raíz del proyecto. En su interior, cree un archivo Sass y asígnele un nombre site.scss. Abra este nuevo archivo Sass y copie lo siguiente:

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

Notará que este es el mismo CSS proporcionado por Visual Studio cuando creamos el proyecto, con la excepción de la backgroundregla en la bodyetiqueta. Ahora elimine el CSS proporcionado ubicado en wwwroot/css(ambos archivos: site.cssy site.min.css). No se preocupe, los generaremos automáticamente con Webpack.

Ahora, descargue pattern.png y colóquelo debajo wwwroot/images.

Cree un archivo JavaScript vacío en la raíz de la aplicación y asígnele un nombre webpack.config.js. Nos ocuparemos de esto más tarde. Debería terminar con la siguiente estructura de proyecto:

Nota: No es necesario que realice los dos pasos siguientes para cada proyecto, solo una vez (a menos que desinstale y vuelva a instalar Visual Studio).

Deberá proporcionar a Visual Studio la ruta de instalación del nodo. Regrese a su proyecto y seleccione Herramientas -> Opciones en el panel izquierdo Proyectos y soluciones -> Administración de paquetes web y agregue la ruta a la instalación del nodo en la parte superior del ist ( C:\Program Files\nodo js or C:\Program Files (x86)\nodejs, dependiendo de si instaló x64 o x86 versión).

Finalmente, descargue NPM Task Runner e instálelo, pero primero deberá cerrar Visual Studio.

Dependencias de Webpack y NPM

Abra el símbolo del sistema y navegue hasta la raíz del proyecto e instale las dependencias necesarias:

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

El primer npmcomando inicializa su package.jsony el segundo instala sus dependencias.

  • webpack, webpack-cli - Paquete de módulos
  • node-sass : enlaces de Node a LibSass; proporciona soporte para Sass
  • postcss-loader, postcss-preset-env - Cargador PostCSS para Webpack para procesar el prefijo automático y la minificación
  • sass-loader, css-loader : Webpack necesita cargadores específicos para admitir Sass y CSS
  • cssnano - minificador de CSS
  • mini-css-extract-plugin : extrae el CSS a un archivo separado
  • cross-env : proporciona soporte a los usuarios de Windows para las variables de entorno. Usaremos la variable de entorno NODE_ENV
  • cargador de archivos : proporciona soporte para archivos (imágenes) en nuestras reglas CSS

En este punto, puede volver a abrir el proyecto en Visual Studio. Una vez que el proyecto termine de cargarse, abra package.jsony agregue los siguientes scripts:

"scripts": { "dev": "webpack --watch", "build": "cross-env NODE_ENV=production webpack" },
  • dev : enlazaremos este script cada vez que se abra el proyecto, y Webpack observará continuamente los cambios en los archivos Sass de origen, los compilará y generará el archivo CSS separado
  • compilación : enlazaremos este script antes de la compilación de cada proyecto y produciremos el archivo CSS de producción, incluida la minificación y el prefijo automático

Nota: Las secuencias de comandos de NPM se ejecutarán automáticamente mediante la ventana del Ejecutor de tareas . Más sobre eso más tarde.

Es hora de trabajar en nuestra configuración de Webpack. Abra webpack.config.jsy copie lo siguiente:

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

Consulte los comentarios en el código para comprender la configuración. (Archivo más legible aquí).

Ahora necesitamos crear algunos enlaces en Task Runner Explorer . Vaya a Ver -> Otras ventanas -> Task Runner Exp lorer. La ventana se mostrará en la parte inferior y verá los scripts que creó en la package.jsonlista debajo de Personalizado. También verá algunas tareas en Defectos predeterminados, pero puede simplemente ignorarlas.

Necesitamos dos enlaces:

  • Haga clic con el botón derecho en compilar -> Enlaces -> Antes de compilar: Visual Studio ejecutará esta tarea antes de cada compilación. Recuerde que este script npm ejecuta Webpack para producción y optimizará el archivo CSS.
  • Haga clic con el botón derecho en dev -> Bindings -> Projec t Open - Visual Studio ejecutará esta tarea cuando abra el proyecto. Recuerde que este script npm ejecuta Webpack en modo reloj y observará cualquier cambio en sus archivos Sass y generará el archivo CSS procesado.

Task Runner Explorer debería verse así:

Nota: Por alguna razón, Visual Studio a veces no se podrá iniciar el dev tarea al abrir el proyecto. Si eso sucede, simplemente abra el Explorador de tareas y ejecute la tarea manualmente.

Puede obtener el código completo del repositorio de GitHub.

Pensamientos finales

Y eso es todo lo que hay también. Como ya tiene Visual Studio abierto, ninguna de las tareas se está ejecutando. Vaya por delante y haga clic derecho en el dev tarea y seleccione Ejecutar. Verá la carga de la tarea y cuando finalice verá que site.cssse creó un archivo en el wwwroot/cssdirectorio. Abrir site.scss, hacer un cambio y guardarlo. Ahora abierto site.css, verá su cambio reflejado allí. ¡¡Frio!!

Ejecute su proyecto presionando Ctrl + F5 , verá un site.min.cssarchivo creado en el wwwroot/cssdirectorio. Este archivo se creó cuando Task Runner ejecutó el buildscript antes de generar el proyecto.

El sitio final debería verse así:

Lo sé, lo sé, el fondo es muy cursi… pero necesitaba una imagen para mostrar el Webpack file-loaderen acción.

Con esta configuración, incluso puede agregar soporte para transpilar JavaScript moderno (ES6 +) a ES5. Mira en los siguientes: @babel/core, babel-loader, @babel/preset-env.

Gracias por leer y espero que lo hayan disfrutado. Si tiene alguna pregunta, sugerencia o corrección, hágamelo saber en los comentarios a continuación. No olvide compartir este artículo y puede seguirme en Twitter, GitHub, Medium, LinkedIn.

También puede visitar mi sitio de blogs personal.

Actualización 25/08/19: He estado construyendo una aplicación web de oración llamada " Mi tiempo de tranquilidad - Un diario de oración ". Si desea mantenerse informado, regístrese a través del siguiente enlace: //b.link/mqt  

La aplicación se lanzará antes de fin de año, tengo grandes planes para esta aplicación. Para ver algunas capturas de pantalla de maquetas, siga el siguiente enlace: //pc.cd/Lpy7

¿Mis mensajes directos en Twitter están abiertos si tiene alguna pregunta sobre la aplicación?