Estilos con SASS

Clase 12 de 29 • Curso Práctico de React JS 2019

Resumen

Los preprocesadores como Sass son herramientas que nos permiten escribir CSS con una sintaxis un poco diferente y más amigable que luego se transformará en CSS normal. Gracias a Sass podemos escribir CSS con variables, mixins, bucles, entre otras características.

Instalación de Sass:

npm install --save-dev mini-css-extract-plugin css-loader node-sass sass-loader

Configuración de Sass en Webpack (webpack.config.js):

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

// ...

module: {
  rules: [
    {
      test: /\.(s*)css$/,
      use: [
        { loader: MiniCssExtractPlugin.loader },
        'css-loader',
        'sass-loader',
      ],
    }, 
  ],
},

// ...

plugins: [
  new MiniCssExtractPlugin({
    filename: 'assets/[name].css',
  }),
],`
```

Guillermo Loza Hernandez

student•

Repórtense los que vieron el el "detalle" desde antes o/ :D

Sebastian Duran

student•

Al auto complementar cuando se estaba agregando el plugin tambien hizo el impor correcto el vscode

Bernardo Aguayo Ortega

student•

ggg

Alejandro Jimenez

student•

background-color: red; es el console.log() de CSS

Diego Cortez

student•

Miguel Angel Reyes Moreno

student•

JJAAJAA nunca lo había visto así pero es cierto

Carlos Salas Torres

student•

Les dejo mi configuración de webpack con la configuración del servidor de desarrollo por si alguien quiere configurar el numero de puerto.

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: 'bundle.js'
    },
    devServer: {
        open: true,
        hot: true,
        port: 8081
    },
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: { 
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.(s*)css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [ 
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html'
        }),

        new MiniCssExtractPlugin({
            filename: 'assets/[name].css'
        })
    ]
}

Los scripts:

`"build": "webpack --mode production",
    "start": "webpack-dev-server"````

David Alejandro Mosquera Moreno

student•

Me sirvió como guía porque había puesto la s del test en mayúscula y no complilaba. Correcto: **/\.(s*)css$/**

Ángel David Vargas Hernández

student•

Tu comentario me salvo de horas de búsqueda en stackoverflow y de desesperación jajaja. Gracias!

Jonatan Ariste

student•

Si tienen problemas para instalar por que les da error de gymp al momento de hacer mkdir etc corran de esta manera la instalación:

sudo npm install -unsafe-perm --save-dev mini-css-extract-plugin css-loader node-sass sass-loader

El flag -unsafe-perm nos soluciona la vida.

Alejandro González Reyes

student•

lo tomaré en cuenta, pero mejor instala con sudo ...

Iván Darío Sánchez Jiménez

student•

Muchas gracias, estaba atascado con un error de instalación.

Joel Bello

student•

Me gusta como explica Leonidas, Pero Oscar es otro nivel.

Sebastián Buitrago

student•

ha dia de hoy no hay que instalar node-sass, solo hay que instalar sass y ya

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

Carlos Villamil

student•

Gracias!!!!!

Andrés Felipe Acevedo Del Rio

student•

Entonces como se haría la configuración? Yo intente hacerla sin ese paquete pero no funciono

Jhon Carlos Colorado Angulo

student•

1 hora solucionando un problema porque .babelrc esta fuera de la carpeta raíz del proyecto. 😂😅

Marcelo Oggero

student•

me paso exactamente lo mismo dos clases atrás, lo tenía en la carpeta public😫

Bernardo Aguayo Ortega

student•

asi se aprende bro!

Cesar Augusto Barco de Gouveia

student•

Acá está la recolección de notas e información conseguida en Internet para complementar este curso.

Documento completo
Aportar o editar en github

Si ayudas a agregar información o investigación extra estaría genial.

sass-loader

Carga un archivo Sass / SCSS y lo compila en CSS.

Empezando

Para comenzar, deberá instalar sass-loader:

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

El sass-loader requiere que instales Node Sass o Dart Sass por tu cuenta (puedes encontrar más documentación a continuación). Esto le permite controlar las versiones de todas sus dependencias y elegir qué implementación de Sass usar.

node sass
dat sass

Encadene el sass-loader con el css-loader y el style-loader para aplicar inmediatamente todos los estilos al DOM o al mini-css-extract-plugin para extraerlo en un archivo separado.

Luego agregue el cargador a su webpackconfiguración. Por ejemplo:

file.js

import style from './style.scss';

file.scss

$body-color: red;

body {
  color: $body-color;
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

Y corre a webpacktravés de tu método preferido.

Britney Hadassa Ascencio Henriquez

student•

Gracias

Antony Giomar Hernández

student•

Casi me quema los ojos cuando se puso el rojo jajaja

Héctor Iván Alfaro Ramírez

student•

Cristian Córdova

student•

x3 :O

Geraldine Hernández. Al-Attrach

student•

Deberían actualizar esta clase

Michael Araque Lugo

student•

Totalmente de acuerdo actulamente hay tantas formas de hacer el tema de los estilos con react por ejemplo Styled Components

Isaí Ramírez

student•

Buen día compañeros y Profe, me pueden ayudar con esto, trate de buscar la solución en google y no tuve éxito, al momento de ejecutar el comando "npm run start" me arroja el siguiente error. Arreglando por supuesto la ruta del webpack:

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

Error de Terminal que me arroja :

npm run start

&gt; EducVideo@1.0.0 start /Users/soterramirez/Documents/Platzi/09 Curso Práctico dr React JS/EducVideo
&gt; webpack-dev-server --open --mode development

sh: webpack-dev-server: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! EducVideo@1.0.0 start: `webpack-dev-server --open --mode development`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the EducVideo@1.0.0 start 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!     /Users/soterramirez/.npm/_logs/2020-04-08T15_58_03_835Z-debug.log

Subo mi repo para que puedan ver a detalle cada archivo https://github.com/SoterRamirez/EducVideo De antemano desde ya gracias por su ayuda y su tiempo

Isaí Ramírez

student•

Listo el error fue corregido, no tenia instalado bien Webpack Dev Server. El profe me ayudo en Twitter https://twitter.com/SoterRamirez/status/1247921144218312706

Brayhan Andres Jaramillo Castaño

student•

Tuve que volver a correr este comando

npm install webpack-dev-server --save-dev

Kafu De León

student•

Ay :( Tuve muchos problemas porque Webpack me decía tiraba error porque decía que necesitaba loaders y plugins, y sí lo tenía todo tal como tú, pero lo que hice fue cerrar y volver a abrir el servidor, y con eso funciono todo.

Ahora cada vez que haga cosas con Webpack sé que debo cerrar el servidor y luego abrirlo cuando haya terminado.

Samuel Gonzalez

student•

Como lo resolviste? me tira error en el loader de sass, ya revisé varias veces y busqué en stackoverflow sin suerte

Sebastian Páez

student•

Estuve horas tratando de solucionar ese problema hasta que leí tu comentario. Gracias

Rene Cruz Flores

student•

En Catalina OS, debido a los cambios de políticas de permisos en consola, para instalar mini-css, los loaders y sass se debe ejecutar la siguiente línea (solo si les da un error de acceso a los directorios de node_modules):

sudo npm install --save-dev mini-css-extract-plugin css-loader node-sass sass-loader --unsafe-perm=true

Saludos!

Humberto López

student•

Gracias, fue muy util!

Gera Garcia

student•

Buen aporte! lo pude instalar sin "sudo" ni "--unsafe-perm=true" y compiló gracias!

Kafu De León

student•

Cuando vi que puso el MiniCssExtractPlugin con el 'html-webpack-plugin' me estaba dando algo en el corazón, sentía ganas de gritar a la pantalla xD

Jesus Adrian Berrio Valdes

student•

Nunca entendí para que sirven estos plugins 😅 se que hacen pero para que quiero extraer inyectar css o js 🤷‍♂️

Angei Portuges

student•

Se puede usar un preprocesador y un framework en css al mismo tiempo? Por ejemplo: Sass y Materialize

Cristofher Jumbo Jimenez

student•

SI por supuesto, de hecho la propia pagina web oficial de materialize te da muestras en SASS por si prefieres usar preprocessadores. Aqui te dejo el link --> click me

Angei Portuges

student•

Gracias! Me gusta usar mas Materialize a diferencia que Bootstrap ya que muchos diseños tienen Bootstrap y casi todos se parecen

María Sierra

student•

Estilos con SASS

Comando para instalar instalar sass

npm install mini-css-extract-plugin css-loader node-sass sass-loader --save-dev

Después de instalarlo tienes que ir al archivo de webpack.config.js y escribir en rules esto

{
    test: /\.(s*)css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'sass-loader'
    ]
}

Además, añadir más abajo en plugins esto:

new MiniCssExtractPlugin({
    filename: 'assets/[name].css'
}),

Luis Enrique Gamboa Hernandez

student•

Estoy usando Node v16.1.0 y al instalar node-sass tuve un problema porque ya esta deprecado har-validator que lo usa.

Por lo tanto buscando encontre sustituirlo con:

npm install sass-loader mini-css-extract-plugin css-loader sass webpack --save-dev

Gonzalo Vazquez

student•

Estaría bueno que además de los comentarios que ponen los profes abajo de cada video (que es muy util), pusieran de qué documentación sacan los códigos mas relevantes, no digo todo, pero sí ciertos "scripts", asi aprendemos a ir buscando de donde sacar cada cosa.

Oscar Barajas Tavares

Team Platzi•

Me gusta esta idea, también podemos dejar mas recursos en la sección de enlaces.

Angel Eduardo Ramos Mena

student•

Ahora no me deja correrlo, apesar de corregirlo me sale este error en la terminal: (

Este es el codigo de 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: "bundle.js"
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
    
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
           {
            loader: "html-loader"
          }
        ]
      },
      {
        test:/\.(s*)css$/,
        use: [
          {
          loader:MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'sass-loader'
      ],
      },
    ],
  },
  plugins: [

    new HtmlWebpackPlugin({
      //Donde esta ubicado el template que tenemos
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin ({
     filename:'assets/[name].css' 
    }),
  ],
};```

Sebastian Rivera Ocampo

student•

vuelve a instalar webpack, webpack-cli y webpack-dev-server o elimina node_modules y en la consola corres

npm install

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: 'bundle.js'
    },
    devServer: {
        open: true,
        hot: true,
        port: 8081
    },
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: { 
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.(s*)css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [ 
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html'
        }),

        new MiniCssExtractPlugin({
            filename: 'assets/[name].css'
        })
    ]
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

npm run start

&gt; EducVideo@1.0.0 start /Users/soterramirez/Documents/Platzi/09 Curso Práctico dr React JS/EducVideo
&gt; webpack-dev-server --open --mode development

sh: webpack-dev-server: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! EducVideo@1.0.0 start: `webpack-dev-server --open --mode development`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the EducVideo@1.0.0 start 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!     /Users/soterramirez/.npm/_logs/2020-04-08T15_58_03_835Z-debug.log

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: "bundle.js"
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
    
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
           {
            loader: "html-loader"
          }
        ]
      },
      {
        test:/\.(s*)css$/,
        use: [
          {
          loader:MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'sass-loader'
      ],
      },
    ],
  },
  plugins: [

    new HtmlWebpackPlugin({
      //Donde esta ubicado el template que tenemos
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin ({
     filename:'assets/[name].css' 
    }),
  ],
};```

Estilos con SASS

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue