how to add global scss styles to preact app

user_10936892 0
Viewed 266

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?

preact webpack reactjs sass javascript
1 Answers

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.

user_153881640
Related