Para utilizar Sass en un proyecto de React 15, la idea principal es similar a la actual, pero con algunas diferencias en la configuración del herramienta de contsrucción (Webpack). En la época de React 15, create-react-app no incluía soporte nativo para Sass, por lo que generalmente se requería una configuración manual de Webpack.

Resumen de los pasos principales

En resumen, necesitas instalar las dependencias de Sass mediante npm y luego configurar el loader de Webpack para procesar archivos .scss o .sass.

Guía detallada

1. Instalar paquetes npm necesarios

Primero, en la raíz de tu proyecto, instala sass-loader y node-sass a través de la terminal. sass-loader permite que Webpack reconozca los archivos Sass, mientras que node-sass es la herramienta de compilación.

npm install sass-loader node-sass --save-dev

Nota: Si tienes problemas al instalar node-sass, puedes intentar instalar dart-sass usando npm install sass. Este es un implementación más moderna y compaitble con sass-loader.

2. Configurar Webpack

Este es el paso que más difiere de un proyecto creado con create-react-app. Necesitas localizar el archivo de configuración de Webpack (generalmente webpack.config.js) y añadir o modificar una regla en module.rules.

Si deseas usar tanto CSS normal como Sass en tu proyecto, la configuración podría ser similar a esta:

// Fragmento de webpack.config.js
module.exports = {
  // ... otras configuraciones
  module: {
    rules: [
      // ... otras reglas de loaders (como babel-loader)
      {
        // 1. Regla de coincidencia: coincide con archivos .scss o .sass
        test: /\.(scss|sass)$/,
        // 2. Loaders a usar (orden de ejecución de derecha a izquierda)
        use: [
          "style-loader", // 3. Inyecta el CSS compilado en la página como una etiqueta <style>
          "css-loader", // 2. Procesa las importaciones y url() en CSS
          "sass-loader", // 1. Compila Sass a CSS
        ],
      },
      {
        // Procesa archivos .css normales
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Puntos clave:

• Orden de los loaders: El orden de ejecución en el array use es de derecha a izquierda. Por lo tanto, sass-loader debe ejecutarse primero para convertir Sass a CSS, luego css-loader procesa el CSS, y finalmente style-loader inyecta el estilo en la página.
• Expresión regular test: La expresión regular /\.(scss|sass)$/ indica a Webpack que todos los archivos que terminan en .scss o .sass deben ser procesados por los loaders especificados.

3. Crear archivos Sass y usarlos en componentes

Una vez configurado, puedes crear archivos Sass en el directorio src.

• Crear archivo de estilos (src/components/Button/Button.scss):

// Uso de variables y anidamiento en Sass
$button-bg-color: #61dafb;

.btn {
  padding: 10px 20px;
  background-color: $button-bg-color;
  border: none;
  border-radius: 4px;

  &:hover {
    background-color: darken($button-bg-color, 10%);
  }
}

• Importar y usar en un componente de React (src/components/Button/Button.js):

import React from "react";
// Importar el archivo Sass directamente
import "./Button.scss";

const Button = ({ children }) => {
  // Usar la clase definida
  return <button className="btn">{children}</button>;
};

export default Button;

Avanzado: Usar CSS Modules para evitar conflictos de estilos

En proyectos grandes de React 15, se recomienda encarecidamente usar CSS Modules para evitar la contaminación de estilos globales. Esto requiere una pequeña modificación en la configuración de Webpack.

1. Modificar la configuración de Webpack:

Necesitas agregar la opción modules a css-loader para habilitar CSS Modules.

// webpack.config.js
{
  test: /\.(scss|sass)$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          // Configura el formato de los nombres de clases generados para facilitar la depuración
          localIdentName: '[path][name]__[local]--[hash:base64:5]',
        },
        importLoaders: 1, // Número de loaders aplicados antes de css-loader
      },
    },
    'sass-loader'
  ]
}

2. Usar en componentes:

Debes importar los estilos como un objeto (styles) y referenciar las clases a través de las propiedades del objeto.

import React from "react";
// Importar como un objeto
import styles from "./Button.module.scss";

const Button = ({ children }) => {
  // Acceder a las clases a través del objeto styles
  return <button className={styles.btn}>{children}</button>;
};

export default Button;

Con este método, la clase .btn se convierte en un nombre único de hash (por ejemplo, Button__btn--3Xq9a), evitando así conflictos entre diferentes componentes.

Resumen

Incorporar Sass en un proyecto de React 15 implica básicamente instalar dos paquetes npm y configurar Webpack para procesar estos archivos. Aunque requiere un poco más de configuración manual que los proyectos actuales, los pasos son claros y sencillos. Se recomienda usar CSS Modules para una gestión de estilos más clara y robusta.