Saltar al contenido

Cómo utilizar hojas de estilo en Sass reaccionar appOct, 16thIn este tutorial, vamos a aprender acerca de cómo agregar y el uso Sass …

marzo 13, 2020

 

En esta guía, vamos a aprender acerca de cómo agregar y uso Sass (las hojas de estilo sintácticamente impresionantes) a su aplicación crear reaccionar con la ayuda de un ejemplo.

¿Cuál es Sass?

  • Sass es un preprocesador de CSS, que nos permite usar características que no existen en la CSS como anidamiento, mixins, herencia, etc.
  • Sass compilador cumple sus archivos Sass en archivos CSS.

Adición de Sass reaccionar

Para uso en Sass reaccionar tenemos que instalar un nuevo paquete llamado nodo-Sass de la NGP.

Este tutorial asume que ya ha creado un nuevo proyecto reaccionan con CLI crear una reacción aplicación.

Ejecutar el siguiente comando para instalar el nodo-Sass.

npm i node-sass

Ahora, estamos listos para usar Sass en nuestra aplicación sin reaccionar expulsión.

Usando Sass

Ahora, cambiar el nombre de archivos .css en .scss y también cambiar su importación CSS para SCSS.

Ejemplo:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';import App from './App';

ReactDOM.render(, document.getElementById('root'));