¿Cómo instalar node-sass en el proyecto React?

Sass es un lenguaje de secuencias de comandos que se compila en hojas de estilo en cascada (CSS) . Es una especie de lenguaje de preprocesador. Inicialmente fue diseñado por Hampton Catlin y luego fue desarrollado por Natalie Weizenbaum. Después de sus versiones iniciales, Weizenbaum y Chris Eppstein continuaron ampliando SASS con SassScript. Admite cuatro tipos de datos, y son números, strings, colores y booleanos. El anidamiento también funciona en este idioma.

Requisito previo:

• Conocimientos básicos de ReactJS
   

Proceso de instalación:

• Agregando sass usando npm:

  npm install node-sass --save

• Agregando sass usando hilo:

  yarn add node-sass

Nota: ahora puede cambiar el nombre de App.css a App.scss y actualizar App.js para importar App.scss. Este archivo y cualquier otro archivo se compilarán automáticamente si se importan con la extensión .scss o .sass.
 

Ejemplo: una vez que siga los pasos anteriores, significa que ha instalado sass con éxito y puede comenzar a usarlo.

• App.sass: Como se puede observar en el código del archivo sass, podemos usar variables y también realizar operaciones aritméticas en archivos sass. Esta es la ventaja de usar sass.

  HTML

  $bg:rgb(88, 235, 88); $border-color : black;         .main-block{      background-color: $bg;   height: 4px / 100px  * 100% ;   border: 1px solid $border-color;   text-align: center;    }

• Aplicación.js

  JavaScript

  import logo from './logo.svg'; import './App.scss';    function App() {   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />            <p>           Edit <code>src/App.js</code> and save to reload.         </p>            <a           className="App-link"           href="https://reactjs.org"           target="_blank"           rel="noopener noreferrer"         >           Learn React         </a>       </header>     </div>   ); }    export default App;

• Producción: