A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Loaders para CSS y preprocesadores de CSS

8/28
Recursos

Aportes 64

Preguntas 23

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

<h4>Ideas/conceptos claves</h4>

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.

<h4>Apuntes</h4>
  • 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

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
    ]
}

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(),
  ]

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.

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! [email protected]1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]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

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

<h3>Instalaci贸n con Sass</h3>

.

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

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.

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

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.

馃摉 Les comparto esta lectura donde es una buena introducci贸n de los conceptos de pre y post procesadores

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(),
  ]
}```
<h4>Loaders para CSS y preprocesadores de CSS</h4>

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 馃槀

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"],
      },
    ],
  },

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

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! 馃槈

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: '[email protected]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

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

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

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 !

Oscar es un Instructor muy bueno.

En la expresi贸n regular del test de mini-css-extract-plugin la 鈥渋鈥 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?

Algo mas algo menos
particularidades
particularidades
particularidades
particularidades
particularidades

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

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

Por si le ayuda a alguin.

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

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, 鈥榗ss-loader鈥, 鈥榮ass-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 馃憣.