I created preact template from default preact-cli template
added:
"sass": "^1.45.1",
"sass-loader": "^10.2.0",
import global scss file into index.js and global styles work fine
import "./style/global.scss";
import App from "./components/app";
export default App;
added into global.scss file mixin and scss vars:
@mixin br {
border-radius: 12px;
}
and when i try to use it in some component like:
.merchant {
margin-bottom: 4px;
@include br;
}
I get 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.js
looks like i need to something like loader for this and where I need to add it?
You'll need to import the SCSS file if you want to use anything from it.
@import 'path/to/global.scss';
.merchant {
margin-bottom: 4px;
@include br;
}
To clarify, this is normal practice when working with SCSS; variables and mixins are not added as globals to your loader (and I've never seen a setup where they were, so I'm curious if you've ran into a system like this). The SCSS processor will compile each file individually, so without an import, it won't be able to resolve your mixin.