es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo añadir estilos globales en formato SCSS a una aplicación de Preact

26 Jul, 2023 Programación

Creé una plantilla preact a partir de la plantilla preact-cli predeterminada.

Añadí:

"sass": "^1.45.1",
"sass-loader": "^10.2.0",

Importé el archivo global scss en index.js y los estilos globales funcionan correctamente.

import "./style/global.scss";
import App from "./components/app";
export default App;

Añadí un mixin y variables scss al archivo global.scss:

@mixin br {
  border-radius: 12px;
}

y cuando intento usarlo en un componente como:

.merchant {
    margin-bottom: 4px;
    @include br;
}

Obtengo un error:

ERROR ./components/header/style.scss (../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js??ref--6-0!./components/header/style.scss)
Module build failed (from ../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js):
@include br;
^
Undefined mixin.
╷
6 │ @include br;
  │ ^^^^^^^^^^^
╵
stdin 6:5  root stylesheet
  in ./src/components/header/style.scss (line 6, column 5)
 @ ./components/header/style.scss 2:12-238 9:17-24 13:7-14 45:20-27 47:4-60:5 49:6-59:7 50:38-45 56:26-33 58:21-28 68:15-22
 @ ./components/header/index.js
 @ ./components/app.js
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

Parece que necesito algo como un “loader” para esto, ¿dónde debo agregarlo?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El mensaje de error sugiere que el mixin br no está definido. Para solucionar esto, debes agregar un cargador de SASS a la configuración de tu webpack.

    En preact-cli, puedes agregar un cargador de SASS instalando preact-cli-plugin-sass y agregándolo a tu archivo preact.config.js.

    Para agregar el complemento, ejecuta el siguiente comando:

    npm install preact-cli-plugin-sass --save-dev

    Luego, en tu archivo preact.config.js, añade lo siguiente:

    const sass = require('preact-cli-plugin-sass');

export default function (config, env, helpers) {
   // añade el complemento de SASS
   sass(config, env, helpers);
}

    Con esta configuración, webpack utilizará el cargador de SASS para analizar tus archivos .scss y hacer que los mixins y variables estén disponibles en tus componentes.

    Ten en cuenta que es posible que necesites actualizar tu declaración de importación para incluir la extensión del archivo:

    import "./style/global.scss";

    Con estos cambios realizados, tu mixin ahora debería estar disponible para usar en tus componentes.

Comments are closed.