Creé la plantilla preact a partir de la plantilla preact-cli predeterminada
adicional:
"sass": "^1.45.1", "sass-loader": "^10.2.0",importe el archivo scss global en index.js y los estilos globales funcionan bien
import "./style/global.scss"; import App from "./components/app"; export default App;agregado en el archivo global.scss mixin y scss vars:
@mixin br { border-radius: 12px; }y cuando trato de usarlo en algún componente como:
.merchant { margin-bottom: 4px; @include br; }me sale error:
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.jsParece que necesito algo como el cargador para esto y ¿dónde debo agregarlo?
Deberá importar el archivo SCSS si desea usar algo de él.
@import 'path/to/global.scss'; .merchant { margin-bottom: 4px; @include br; }Para aclarar, esta es una práctica normal cuando se trabaja con SCSS; las variables y los mixins no se agregan como globales a su cargador (y nunca he visto una configuración donde estaban, así que tengo curiosidad si se ha topado con un sistema como este). El procesador SCSS compilará cada archivo individualmente, por lo que sin una importación, no podrá resolver su mezcla.