Configuring Metronic theme SCSS variables in Storybook
I'm using the Metronic theme version 8.1.7 React version in my project.
For documentation of my UI component I wish to use Storybook version 7.
While the initial setup was pretty smooth, I have struggled a lot with getting the global SCSS styles to work in Storybook.
What have worked so far for me, is to import the "style.scss" into my preview.ts file in the generated .storybook directory like this:
"import "!style-loader!css-loader!sass-loader!../src/_metronic/assets/sass/style.scss";".However, not all the SCSS variables are loaded properly into the DOM (note that some are!).
For example, in the ".text-muted" class:
.text-muted {
color: var(--bs-text-muted) !important
}the --bs-text-muted comes out as undefined in the DOM.
My question to you are therefore, how does the Metronic theme works in regard of loading SCSS files, classes, variables etc in?
For example when I open "_variables.custom.scss" in src/_metronic/assets/sass/layout" on line 8 in my IDE (VS Code) I have the "$app-blank-bg-color: $white;" and my IDE is not even able to tell where the "$white" variable is coming from? Shouldn't it be imported into the SCSS file?
Hope my question makes sense, and thanks in advance for your help!
Replies (10)
Hi Gustav,
Thank you for reaching out.
Are you using the same version of scss file as in our demos?
Most of the variable actual values come from file src/_metronic/assets/sass/core/components/_variables.scss, make sure that you imported this file correctly and you follow the default theme imports order.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
What is the order for defult theme imports? 
Since I haven't changed anything in the SCSS, then yes I assume I'm still using the same version of scss as in your demo.
Right now I have the following:
import '!style-loader!css-loader!sass-loader!../src/_metronic/assets/sass/style.scss';
Also importing the _variables.scss file does not make an impact. "var(--bs-text-muted) !important" is still undefined
Hi Gustav,
Just make sure that you import 'init' file before you are importing the component and layout files.
// Initialize
@import "init";
// Components
@import "./core/components/components";
@import "components/components";
// Layout
@import "./core/layout/base/layout";
@import "layout/layout";I guess that you might have undefined bootstrap variables due to missing bootstrap dependency in your
package.json. You should add the dependency below to your package.json."bootstrap": "5.3.0-alpha1",Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris, I think I'm having the same issue here I have imported all the Metronic sass files without changing anything, and `--bs-primary-inverse` is undefined. After reviewing my package.json I see I have `"bootstrap": "^5.3.0-alpha1", "bootstrap-icons": "^1.9.1",` but those root variables are not working.
I think, I found my problem, the data-bs-theme="light" attribute is missing from my html tag. I'm using only the Metronic styles on a next.js project. So I think I'll have to see how to add it to the html tag
I guess you can add those html tags in your .storybook directory in the preview-head.html file. Did you do that and succeeded? If so, I would very much like so see what those tags looks like. This is what my preview-head.html looks like:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="ClearView" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
<link rel="shortcut icon" href="./media/logos/topsoe_thumbnail.png" />
<link rel="stylesheet" href="./splash-screen.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>But some of the scss classes still comes out as undefined
Hi,
Thank you for sharing your solution here.
We are switching our variable values depending on the current theme mode so data-bs-theme is required attribute.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
What do you exactly mean by "data-bs-theme is (a) required attribute"? And where is this attribute's state being defined in the code, so I can recreate that value this in storybook?
Hi Gustav,
All our Metronic versions have data-bs-theme attributes on html tag.
For light mode:
<html lang="en" data-bs-theme="light">For dark mode
<html lang="en" data-bs-theme="light">These attributes switch variables depending on a value.
dark for dark mode variable values and light for light mode variables.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Gustav, were you able to solve your issue?
