Configuración de Webpack para CSS y Preprocesadores

Loaders
Fuera de contexto, webpack solamente entiende JavaScript y JSON. Los loaders nos permite procesar archivos de otros tipos para convertirnos en módulos válidos que serán consumidos por nuestras aplicaciones y agregadas como dependencias.

En alto nivel, los loaders poseen 2 configuraciones principales:

1. test - propiedad que identifica cuáles archivos deberán ser transformados
2. use - propiedad que identifica el loader que será usado para transformar a dichos archivos

Plugins
Mientras los loaders transforman ciertos tipos de módulos, los plugins _son utilizados para extender tareas específicas, como la optimización de paquetes, la gestión de activos y la inyección de variables de entorno.

Una vez importado el plugin, podemos desear el personalizarlos a través de opciones.

Para sass

npm i -D node-sass sass-loader

Añadimos el loader al arreglo de loaders y modificamos un poco la expresion regular

{
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"]
      },

📘 Loaders para CSS y preprocesadores de CSS

Un preprocesador CSS es un programa que te permite generar CSS a partir de la syntax única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo, la mayoría de preprocesadores CSS añadirán algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

post procesadores son herramientas que procesan el CSS y lo transforman en una nueva hoja de CSS que le permiten optimizar y automatizar los estilos para los navegadores actuales.

• Para dar soporte a CSS en webpack debes instalar los siguientes paquetes

Con npm

npm i mini-css-extract-plugin css-loader -D

Con yarn

yarn add mini-css-extract-plugin css-loader -D

• css-loader ⇒ Loader para reconocer CSS
• mini-css-extract-plugin ⇒ Extrae el CSS en archivos
• Para comenzar debemos agregar las configuraciones de webpack

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	...,
	module: {
    rules: [
      {
        test: /\.(css|styl)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
        ]
      }
    ]
  },
  plugins: [
		...
    new MiniCssExtractPlugin(),
  ]
}

• Si deseamos posteriormente podemos agregar herramientas poderosas de CSS como ser:
  • pre procesadores
    • Sass
    • Less
    • Stylus
  • post procesadores
    • Post CSS

RESUMEN: Puedes dar soporte a CSS en webpack mediante loaders y plugins, además que puedes dar superpoderes al mismo con las nuevas herramientas conocidas como pre procesadores y post procesadores

Hola a todos, para los que tienen problema al agregar el archivo .styl
En la regla de css deben reemplazar la expresión regular

/\.css$/i

por

/\.css|\.styl$/i

MiniCssExtractPlugin
Este loader lo que nos permite es que en nuestro proyecto de desarrollo poder importar en los archivos JavaScript importar archivos CSS o de otros preprocesadores, al final webpack importara en nuestro HTML todo nuestro css.
Instalación
NPM

npm i mini-css-extract-plugin css-loader -D

yarn

yarn add mini-css-extract-plugin css-loader -D

instalación stylus

npm i stylus-loader -D

Un punto que me gustaría complementar es que webpack ejecuta los loaders de derecha a izquierda (Convirtiendo primero de stylus a CSS y luego ya trabaja y extrae el CSS)

test: /\.css|.styl$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader']

O de abajo hacia arriba (Tambien comenzando por convertir de stylus a CSS y luego extrayendo el CSS) según sea el caso en el que los acomodemos.

test: /\.css|.styl$/i,
use: [
	MiniCssExtractPlugin.loader,
	'css-loader',
	'stylus-loader'
]

.
Me parece importante mencionarlo para no cometer errores en el futuro solo por no ordenar nuestros loaders correctamente.

MY NOTES FOR CSS AND PREPROCETORS OF CSS 😄

Aporte OP

Para sass

npm i -Dnode-sass sass-loader

Añadimos el loader al arreglo de loaders y modificamos un poco la expresion regular

{
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"]
      },

**Loaders**Fuera de contexto, webpack solamente entiende JavaScript y JSON. Los loaders nos permite procesar archivos de otros tipos para convertirnos en módulos válidos que serán consumidos por nuestras aplicaciones y agregadas como dependencias.

En alto nivel, los loaders poseen 2 configuraciones principales:

1. test - propiedad que identifica cuáles archivos deberán ser transformados
2. use - propiedad que identifica el loader que será usado para transformar a dichos archivos

**Plugins**Mientras los loaders transforman ciertos tipos de módulos, los plugins _son utilizados para extender tareas específicas, como la optimización de paquetes, la gestión de activos y la inyección de variables de entorno.

Una vez importado el plugin, podemos desear el personalizarlos a través de opciones.

En esta clase vamos a aprender a añadir un loader para pode utilizar nuestro css y también un plugin para poder trabajar con css dividirlo en diferentes partes de nuestra aplicación y unirlo

Es importante eliminar las conexiones de archivos a css o scripts de js porque webpack cuando se compile lo hace

• Primero instalamos el loader

npm install mini-css-extract-plugin css-loader -D

• Eliminamos la conexion al css que esta en nuestro html porque webpack la generara automáticamente al compilarse
• En nuestro codigo en src/index.js importamos nuestros estilos

import Template from './templates/Template.js';
import './styles/main.css';

(async function App() {
  const main = null || document.getElementById('main');
  main.innerHTML = await Template();
})();

• Vamos a añadir la configuración a webpack para que pueda identificar los elementos que acabamos de agregar.

Importamos la dependencia

const MiniCssExtracPlugin = requiere('mini-css-extract-plugin');

• Agregamos el loader a nuestras reglas

{
      test: /\.css$/i, //expresion regular
      //cual es elemento que vamos a tenr
        //Nosotros podemos usar el use con un objeto o un arreglo segun la configuracion 
          // del plugin
      use:[MiniCssExtracPlugin.loader, 'css-loader'], 

    }

• Creamos en los plugins una instancia de nuestro dependencia que importamos

plugins: [
    //hacemos una instancia de lo que definimos en el inicio del archivo
      // le anadimos por parametro un objeto donde vamos a tener las 
        //configuraciones que le vamos anadir a nuestro plugin
    new HtmlWebpackPlugin({

      //inyecta el bundle al template html
      inject: true,
      //la ruta al template html
      template: './public/index.html',
      //nombre final del archivo
      filename: './index.html' 

    }),
    new MiniCssExtracPlugin(),
  ]

si les da error al ejecutar stylus ; la sintaxis que me funciono es la siguiente

$font-size = 14px
$colortext = blue

body{
color: $colortext;
font: $font-size sans-serif;
}

El webpack config queda asi:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    // mode: 'production', // LE INDICO EL MODO EXPLICITAMENTE
    entry: './src/index.js', // el punto de entrada de mi aplicación
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'dist'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    },
    module: {
        // REGLAS PARA TRABAJAR CON WEBPACK
        rules : [
            {
                test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css|.styl$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' , 'stylus-loader' ]
            }
        ]
    },
    // SECCION DE PLUGINS
    plugins: [
        new HtmlWebpackPlugin({ // CONFIGURACIÓN DEL PLUGIN
            inject: true, // INYECTA EL BUNDLE AL TEMPLATE HTML
            template: './public/index.html', // LA RUTA AL TEMPLATE HTML
            filename: './index.html' // NOMBRE FINAL DEL ARCHIVO
        }),
        new MiniCssExtractPlugin() // INSTANCIAMOS EL PLUGIN
    ]
}

Tus posibles dudas resueltas:

1. ¿Cómo sabe webpack que debe agregar el vínculo a la hoja de estilos Css?

Lo hace porque en el index.js lo pusimos como import. Esto hace que se vuelva una dependencia, por lo que la incluirá en el archivo HTML de salida.

2. ¿Cuál es la diferencia entre el loader y el plugin de css?

Webpack solo entiende JavaScript y JSON. El loader permitirá que webpack entienda otros tipos de lenguajes. en este caso CSS.Esto hará que se pueda agregar al gráfico de dependencias.
.
Pero una cosa es entender CSS y otra cosa poder “exportar CSS”. Para exportarlo usamos el plugin mini-css-extract-plugin.
.

3. ¿Por qué en la configuración de webpack añadimos la parte de consty require al inicio del archivo?

Porque un plugin es un objeto. En la constante MiniCssExtractPluginestamos guardando el código de la clase a partir de la cuál vamos a instanciar dicho objeto. El código original vive en la dependencia que descargamos.
.

4. ¿Para qué son la parte de test y use?

Esta parte es para los loaders. El profesor lo hizo en “desorden” y por eso podría ser confuso cuàndo estamos configurando el loader y cuándo estamos configurando el plugin.
.
En el caso de las reglas, test y use son para configurar los loaders. En testse le indica qué tipo de archivos deben de ser transformados y en use se le indica qué loader debe usar para transformar el tipo archivos que indicaste en test. En este caso es como decirle: Cada que te encuentres un archivo en formato CSS, utiliza css-loader para transformarlo y agregarlo al gráfico de dependencias.
.

5. ¿Por qué le pasamos dos elementos al use para el loader CSS?

La documentación lo recomienda de esa manera. Puedes ver más info aquí: https://webpack.js.org/plugins/mini-css-extract-plugin/
.

6. ¿A qué se refiere new MiniCssExtractPlugin()?

Es la forma de instanciar un objeto del plugin. Recuerda que los plugins son objetos y que podemos instanciar cuantos necesitemos para diferentes funciones.
.

7. ¿Por qué el archivo de salida se llama main.css?

Porque el plugin genera un archivo css por cada archivo js que contenga css como dependencia. Al archivo css de salida le coloca el nombre del archivo js de entrada.
.

la verdad, estoy muy perdido con estos cursos, el profesor es excelente pero no logro hacerme a la idea de que me digan, haz esto y aquello, escribe este comando, instala esta dependencia y ya con eso voy a progresar como programador, copio pego y doy enter a un monton de cosas que no se porque rayos estan alli, no entiendo porque debo usarlas, no entiendo como funcionan por dentro y lo PEOR DE TODO un dia dependendicas que pertenecen a otra persona podrian desaparecer o dejar de actualizarse, alli que hare? si nisiquiera se como funcionan o porque no las estamos aprendiendo a crear sino que debemos usarlas de otro y encima son tan importantes para un proyecto… estoy perdido, me gustaria que ademas del milagro me dijeran como opera el santo

Cabe recalcar lo que hace webpack hasta este punto es como un hilo 🧵 tiene un inicio, va jalando el hilo poco a poco y va encontrando cosas como el código JavaScript, dentro del detecta en este caso el CSS. Entonces al finalizar de jalar el hilo dejara todo en la carpeta de output.

A la fecha 29/04/2021 live server presenta inconvenientes con la ultima actualización de win 10 y wsl, recomiendo usar Live Server Preview

📖 Les comparto esta lectura donde es una buena introducción de los conceptos de pre y post procesadores

• Pre y Post Procesadores de CSS, lo que hay en medio.

El profe Oscar tiene un enorme conocimiento en los temas de tecnologias, pero se emociona mucho explicando que para mi (quizas otras personas) procesamos la informacion de forma mas apausada, seria bueno que bajara un poco la velocidad y explicara con mucho mas detalle cada paso. Gracias!

alguien sabe xq me sale error?

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.24.2 compiled with 4 errors in 1905 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! js-portfolio@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the js-portfolio@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Yovanna\AppData\Roaming\npm-cache\_logs\2021-03-03T05_02_40_345Z-debug.log

.

En tu terminal, corres el siguiente comando:

npm install sass-loader sass webpack --save-dev

Posteriormente, te diriges a tu archivo webpack.config.js y añades esto:

{
			test: /\.css|.s[ac]ss$/i,
			use: [
				MiniCSSExtractPlugin.loader,
				'css-loader',
				'sass-loader'
			],
}

Comanditos:

• yarn

yarn add mini-css-extract-plugin css-loader -D

• npm

npm i mini-css-extract-plugin css-loader -D

Ok para sass y también css lo que hice fue quitar todo lo de MiniCssExtractPlugin tanto de rules como de plugins incluso de package.json
instale los siguientes loaders:

npm install css-loader style-loader sass-loader sass --save-dev

y por ultimo mi webpack.config.js qued asi

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  resolve: {
    extensions: [".js"],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/,
      },
      {
        test: /.(css|sass|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true, // INYECTA EL BUNDLE AL TEMPLATE HTML
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
};

Creo que es mas limpio y me funciona bien.
PD: la parte de sass la agrega en el js y no en el css

Para todos los que obtienen el error de que MiniCssExtractPlugin no es un constructor, se soluciona de la siguiente manera:

• Lo declaran como objeto usando la palabra default y listo, todo lo demás no modifican nada.

const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin'); 

Descubrir esto me llevó más de 3 horas 😣 porque no encontraba una solución en ningún lado, espero les sirva! 😉

Para Sass

Instalamos Sass y su loader:

npm i -D sass sass-loader

Y en el archivo webpack.config.js

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s?css$/i,
        use: [MiniCssExtratPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },

Para CSS:

Para preprocesadores:

Traté de agregar sass al proyecto que estamos trabajando y me dio errores en el build. Despues de algunas pruebas noté que el orden de los loaders afecta la compilación, styl debe ir como loader final:

{
                test: /\.css|.scss|.styl$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                    'stylus-loader',
                ]
            }

Para los que no sabemos de expresiones regulares, es como chino mandarín en el código.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css|.styl$/i,
        use: [MiniCssExtractPlugin.loader,
          'css-loader'
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin(),
  ]
}```

Tenemos que usar loaders de CSS para que webpack pueda entender estos archivos y trabajar con ellos.

npm i mini-css-extract-plugin css-loader -D para lograr esto.

Podemos hacer que webpack tambien entienda los prepocesadores de CSS:

npm i stylus-loader -D por ejemplo para stylus.

en la parte de stylus, esta parte tiene que estar junto

test: /\.css|.styl$/i,

Hola amigos, si alguien tiene un error como este…

TypeError: compiler.plugin is not a function
    at HtmlWebpackPlugin.apply (/mnt/c/users/alejandro/desktop/programming/webpack/proyecto1/js-portfolio/node_modules/html-webpack-plugin/index.js:45:12)
    at createCompiler (/mnt/c/users/alejandro/desktop/programming/webpack/proyecto1/js-portfolio/node_modules/webpack/lib/webpack.js:74:12)
    at create (/mnt/c/users/alejandro/desktop/programming/webpack/proyecto1/js-portfolio/node_modules/webpack/lib/webpack.js:127:16)
    at webpack (/mnt/c/users/alejandro/desktop/programming/webpack/proyecto1/js-portfolio/node_modules/webpack/lib/webpack.js:135:47)
    at WebpackCLI.f [as webpack] (/mnt/c/users/alejandro/desktop/programming/webpack/proyecto1/js-portfolio/node_modules/webpack/lib/index.js:55:16)
    at WebpackCLI.createCompiler (/mnt/c/users/alejandro/desktop/programming/webpack/proyecto1/js-portfolio/node_modules/webpack-cli/lib/webpack-cli.js:2053:29)
    at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:52:5)
    at Function.Module.runMain (internal/modules/cjs/loader.js:871:11)
    at internal/main/run_main_module.js:21:11

Antes… respira… y luego desinstala el HtmlWebpackPlugin e instálalo de esta forma

npm install --save-dev html-webpack-plugin

y lo mismo con el MiniCssExtractPlugin, desinstálalo y luego…

npm install --save-dev mini-css-extract-plugin

Con esto ya debería funcionar, tambien puedes hacer lo mismo con el css-loader y si aún así no funciona… verifica que tienes todo bien escrito en tu webpack.config…
Con todo esto, espero que no pases 5 horas buscando el error como yo 😂

cuidado que al instalar el mini-css-extract-plugin ya no pueden usar la configuracion que esta escribiendo el profesor, da un problema diciendo que no es un constructor, no encontre como solucionar el problema, tuve que instalar la version exacta que esta usando en este video

Este profe si que es uno de los mejores, se deja entender y sobre todo, se nota que le gusta el tema

No carga el video 😦

Si se preguntan por los lindos íconos del profesor, el tema es
Helium icon theme

Al principio me salió este error y me demore un poco encontrando la solución pues no sabía comoa ctualziar nodeJS

npm WARN EBADENGINE Unsupported engine { package: 'mini-css-extract-plugin@2.1.0',
npm WARN EBADENGINE   required: { node: '>= 12.13.0' },
npm WARN EBADENGINE   current: { node: 'v10.19.0', npm: '7.19.1' } }

En la página https://nodejs.org/es/download/package-manager/ se pueden encontrar las especificaciones de instalación
Y en https://github.com/nodesource/distributions/blob/master/README.md están detalladas las instrucciones para actualizarlo

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

Regex para Sass
.s?[ac]ss

Siguiendo los pasos tuve que instalar las siguientes librerias para proseguir con el ejercicio

npm i --save-dev mini-css-extract-plugin
npm i mini-css-extract-plugin css-loader -D
npm install stylus --save-dev
npm i stylus-loader -D

Algo mas algo menos
particularidades
particularidades
particularidades
particularidades
particularidades

En mi caso, puso un comentario para separar los estilos de stylus

Aquí un buen sitio que explica webpack y sus componentes.

Por si le ayuda a alguin.

npm i mini-css-extract-plugin css-loader -D

Loaders to CSS and CSS preprocessors

Install dependencies that we going to use

• css loader.
• plugin to css → mini css

npm install mini-css-extract-plugin css-loader -D

Prepare the project

1. Modify the index.html into public folder

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../src/styles/main.css">
     <title>JS Portfolio</title>
   </head>
   
   <body>
     <div id="main"></div>
   </body>
   
   </html>
   

   We going to delete the css file. Because webpack go to make the css resource.

2. Into the src folder we going to modify the index.js file.

   import Template from './templates/Template.js';
   import './styles/main.css';
   
   (async function App() {
     const main = null || document.getElementById('main');
     main.innerHTML = await Template();
   })();
   

   On line 2 we import the css resource to connect with the project.

3. Add the necessary settings to do available the css resource and html resource. This on webpack.config.js file.

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'main.js',
     },
     resolve: {
       extensions: ['.js'],
     },
     module: {
       rules: [
         {
           test: /\.m?js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
           },
         },
         {
           test: /\.css$/i,
           use: [
             MiniCssExtractPlugin.loader,
             'css-loader'
           ],
         }
       ],
     },
     plugins: [
       new HtmlWebpackPlugin({
         inject: true,
         template: './public/index.html',
         filename: './index.html',
       }),
       new MiniCssExtractPlugin(),
     ],
   };
   

   1. Add the plugin to the file.
   2. Create the settings to css loader.
   3. Use the plugin to different files.

   Work with pre-processors

   1. Install the stylus loader.

      npm install stylus stylus-loader -D
      

   2. Add to webpack.config.js file the loader.

      const path = require('path');
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');
      
      module.exports = {
        entry: './src/index.js',
        output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'main.js',
        },
        resolve: {
          extensions: ['.js'],
        },
        module: {
          rules: [
            {
              test: /\.m?js$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
              },
            },
            {
              test: /\.css|.styl$/i,
              use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
            },
          ],
        },
        plugins: [
          new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html',
          }),
          new MiniCssExtractPlugin(),
        ],
      };
      

Trabajar con CSS

Para trabajar con CSS hay que instalar dos dependencias: mini-css-extract-plugin y css-loader.

Para empezar a trabajar con Webpack y estilos hay que realizar varios cambios.

Lo primero es eliminar la etiqueta de estilos del template, los estilos los vamos a añadir directamente en el archivo de JS importandolos.

Ahora hay que añadir la configuración a Webpack para trabajar con CSS, primero se crea una constante desde la librería al igual que con el plugin de HTML.

Lo siguiente es añadir un nuevo objeto en la propiedad rules para indicar que archivos y que loader se usará para CSS.

Después creamos una nueva instancia del plugin en la sección plugins.

Si ejecutamos Webpack, podemos ver que ahora en la carpeta dist se generó un archivo CSS con todos los estilos de la app.

Trabajar con Preprocesadores

En este caso vamos a trabajar con Stylus.

Para trabajar con Stylus primero hay que instalar el compilador del preprocesador y el loader del mismo.

Después hay agregar la extensión de archivos de Stylus y el loader a la configuración que ya teníamos de CSS.

Si corremos Webpack veremos que tanto los estilos de CSS como los de Stylus se agregaron al archivo main.css de la carpeta dist.

hasta este punto… todo me ha parecido excelente

Si alguno le da problemas esta clase al tratar de ejecutar, TypeError: MiniCssExtractPlugin is not a constructor, a mi me funciono guardar una versión anterior del plugin en mi caso:
npm i -D --save-exact [email protected]

Recomendación para todos: Revisen en cada clase la sección de Archivos y Enlaces, hay links hacia la documentación de Webpack referentes a los loaders y plugins que vemos en cada clase 😄 ayudan un montón !

• Sass loader:
  https://www.npmjs.com/package/sass-loader

• Stylus loader:
  https://www.npmjs.com/package/stylus-loader

• Less loader:
  https://www.npmjs.com/package/less-loader

Oscar es un Instructor muy bueno.

Algo que me gustaría aportar:
css-loader nos permitirá importar nuestro css directamente en nuestros archivos JS, mientras que mini-css-extract-plugin permite extraer el css en archivos .css independientes, donde cada uno agrupa los estilos de cada archivo JS que los importa.
El que se encarga de inyectar el css resultante es el html-webpack-plugin.

Podemos usar el css-loader sin el mini-css-extract-plugin, lo que conseguiríamos es que el css se cargue directamente en el js resultante. Para hacerlo así tendríamos que instalar el paquete style-loader, y tener esta configuración en nuestros loaders.

module: {
        rules: [
           ...
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            }
        ]
}

aqui me quede. clase 8 min 6:13

Webpack provides a means to generate a separate CSS bundles using mini-css-extract-plugin (MCEP). It can aggregate multiple CSS files into one. For this reason, it comes with a loader that handles the extraction process. The plugin then picks up the result aggregated by the loader and emits a separate file with the styling.

fuente

Aquí se explica el funcionamiento de MiniCssExtractPlugin

Instanciación del plugin de minicss

Configuración de loaders para CSS

Importamos el plugin mini-css-extract-plugin

Importo estilos directamente en Javascript

Eliminar el link a css, ya no es necesario

Instalación de paquetes para CSS

En la expresión regular del test de mini-css-extract-plugin la “i” al final significa que hace toda la expresión case-insensitive, ejemplo .CSS sería lo mismo que .csS, .Css, etc

/\.css$/i

Mis apuntes

Instalamos el plugin de renderizado para css

npm i mini-css-extract-plugin css-loader -D

Cambios realizados en el archivo webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
	entry:  './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }

    ]},
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin(),
    ]

}

Destaco los cambios realizados.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'
           
            ]
        }

    ]},
 plugins: [
 	new MiniCssExtractPlugin(),
]

Instalamos el preprocesador de stylus

npm i stylus stylus-loader --save-dev 
o
npm i stylus stylus-loader -D

Agregamos a module:

  module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css|.scss|.styl$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader',
            ]
        }

    ]},

Dato a tener en cuenta en el vars.styl, si los espacios están mal te devuelve un error al correr la aplicación.

$color-black = red

body
  color $color-black

const path = require('path');
const html = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Entry nos permite decir el punto de entrada de nuestra aplicación
  entry: './src/index.js',
  // Output nos permite decir hacia dónde va enviar lo que va a preparar webpacks
  output: {
    // path es donde estará la carpeta donde se guardará los archivos
    // Con path.resolve podemos decir dónde va estar la carpeta y la ubicación del mismo
    path: path.resolve(__dirname, 'dist'),
    // filename es el nombre del archivo que se va a crear
    filename: 'main.js'
  },
  resolve: {
    // extensions nos permite decir que extensiones de archivos queremos que webpack pueda reconocer
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        // Test declara que extensión de archivos aplicara el loader
        test: /\.m?.js$/,
        // Exclude permite omitir archivos o carpetas especificas
        exclude: /node_modules/,
        // Use es un arreglo u objeto donde dices que loader aplicaras
        use: {
          loader: "babel-loader"
        },
      },
      {
        test: /\.css|\.styl$/i,
        use: [miniCssExtractPlugin.loader,
          "css-loader",
          "stylus-loader"] // for sass "sass-loader"
      }
    ]
  },
  // SECCION DE PLUGINS

  plugins: [
    new html({
      // CONFIGURACIÓN DEL PLUGIN
      // INYECTA EL BUNDLE AL TEMPLATE HTML
      inject: true,
      // LA RUTA AL TEMPLATE HTML
      template: './public/index.html',
      // NOMBRE FINAL DEL ARCHIVO
      filename: './index.html'
    }),
    new miniCssExtractPlugin()
  ]
};

Yo para ver todo mas ordenado y encontrar las cosas más fácil guardo las rules en una variable externa:

const ruleJS = {
	test: /\.m?js$/,
	exclude: /node_modules/,
	use: {
		loader: 'babel-loader',
	},
}

const ruleCSS = {
	test: /\.css$/,
	use: [MiniExtractCssPlugin.loader, 'css-loader'],
}

const rules = [ruleJS, ruleCSS]

Lo mismo se podría hacer por ejemplo con los plugin

tenia este error y ae resolvio asi

test: /\.css|.styl$/i,

Los preprocesadores como SASS son una herramienta que nos permite escribir con CSS con una sintaxis un poco diferente y mas amigable que luego se transformara en CSS normal. Gracias a SASS podemos escribir CSS con variables, mixins, bucles, entre otras caracteristicas

Cuál es el tema para VS Code que está utilizando el profesor?

Creo que hay que actualizar este curso, desde la clase 6 nada me sale como al profe y no consigo documentación de los cambios que tengo que hacer.

¡Gran clase! No soy un big fan de los preprocesadores de CSS pero siempre es bueno aprender que es posible utilziarlos

Aun no veo la ventaja de esto, creo que porque solo lo vera el cliente cuando se despliegue

Veo que nadie comentó sobre este warning, el cual es muy importante arreglar, ya que sin el no podremos aplicar la fuente que se requiere.

WARNING in ./src/styles/main.css (./src/styles/main.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.css)
Module Warning (from ./node_modules/css-loader/dist/cjs.js):
Warning
(1:1) Unable to find uri in "@import https://fonts.googleapis.com/css?family=Ubuntu:300,400,500"
 @ ./src/styles/main.css
 @ ./src/index.js 4:0-27

la solución es simplemente modificar la importación de la fuente dentro del css, ya que falta la palabra url
y los parentesis import url(“https://fonts.googleapis.com/css?family=Ubuntu:300,400,500”) para poder funcionar correctamente.

Parecería que un warning puede ser omitido pero su omisión conlleva a una mala interpretación del diseño.
Saludos comunidad

Que agradable este profe

Si queremos modificar la salida del archivo CSS podemos establecerlo mediante el plugin de la siguiente manera:

new MiniCssExtractPlugin({
	filename: 'static/css/[name].[contenthash:8].css',
	chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
})

El profe, vamos a ser rebeldes!!!

Lo que hace:
color-black = red

Lo veo en el infierno profe 😈

8.-Loaders para CSS y preprocesadores de CSS

.
Primero instalamos las dependencias en este caso

npm install mini-css-extract-plugin css-loader -D//Para poder reconocer CSS
//Plugin para poder trabajar con CSS dividido en dif partes de la app y unirlo

Preparamos el proyecto

• Eliminamos la parte que vincula el html con el CSS ya que aquí también webpack se encarga de hacerlo de manera automática.

• En src/index.js vamos a trabajar con las particularidades que tendremos, en este caso, añadir los estilos. Se añade directamente a index.js.

• Añadimos la configuración necesaria a webpack para que los identifique.

• El use se puede usar con un objeto o arreglo según las configuraciones de los plugins.
  .
  Para poder trabajar con preprocesadores haremos lo siguiente, las configuraciones de estos son muy similares:

• Añadimos el loader, en este caso el de stylus:

npm install stylus stylus-loader -D

• En la configuración de webpack solo agregamos una regla que también reconozca la extensión de stylus.

Si a alguno le intereza probar con sass debe:
1- npm install sass sass-loader -D -E
2- import ‘./styles/vars.scss’ => en index.js
y configurar lo siguiente en webpack>rules
{
test: /.css|.s[ac]ss$/i,
use: [ miniCssExtractPlugin.loader, ‘css-loader’, ‘sass-loader’ ]
}

El orden de aplicación de los loaders de Webpack es de derecha a izquierda. Por lo tanto lo que ocurrirá en nuestra configuración de loaders de CSS es:

1. Se aplicará el loader: stylus-loader.
2. Al resultado de (1) se aplica a css-loader.
3. Al resultado de (2) se aplica a MiniCSSExtractPlugin.loader.

Lo primero es instalar las dependencias que vamos a utilizar, CSS LOADER y tambien un plugin que nos ayudara a trabajar con CSS en diferentes partes de nuestra aplicacion y unirlo.

npm install mini-css-extract-plugin css-loader -D

Ahora haremos cambios en nuestros archivos para que todo quede de mejor forma. Primero eliminaremos el link que conecta a HTML con CSS Porque esto se hara de forma automatica. En JS vamos a trbajar con las particularidades que vamos a hacer, que es agregar nuestros estilos.

import './styles/main,css';

Tambien tenemos que agregar la configuracion necesaria en nuestro webpack para que reconozca este tipo de elementos. Primero agregaremos una nueva RULE que sera:

{
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 
            'css-loader'
        ],
        }

Y despues iniciaremos el plugin

new MiniCssExtractPlugin()

Para agregar un preprocesador agregamos el loader en la terminal

npm install stylus stylus-loader -D

Ahora creamos una regla que reconozca la extencion de stylus y modificamos la regla de CSS con:

{
            test: /\.css|.styl$/i,
            use: [MiniCssExtractPlugin.loader, 
            'css-loader',
						'stylus-loader'
        ],
        }

Ahora cuando tengamos nuestro archivo del pre procesador lo importamos al index.js

import './styles/vars.styl';

particularidades
particularidades
particularidades
particularidades
particularidades

Está siendo ardua la cosa xd

en caso de que tenga algun error con el live-server les dejo este pequeño tutorial donde explico como arreglar un pequeño error que obtuve antes
https://platzi.com/tutoriales/2242-webpack/9925-error-con-live-server-de-vsc/

Por si les sirve la documentación sobre el loader y el plugin que instalamos, y dejo un mini resumen de la utilidad de estos:

1. css-loader(url para ver más: https://webpack.js.org/plugins/mini-css-extract-plugin/): Interpreta dentro de tu archivo css los _ @imports_ y url(). Además puedes ver en consola el css de tu página importándolo 🧐.

2. mini-css-extract-plugin(url para ver más: https://webpack.js.org/loaders/css-loader/): Te permite ejecutar el código css global de esta forma importándolo dentro del Js, además de igual manera podemos importar clases y verlas en consola 👌.