Open akhiltheguitarist opened 4 years ago
Experiencing the same issues. I added some style imports to a .storybook/preview.js
file but adding each individual import for each component would be way too much work.
.storybook/preview.js
import 'react-toastify/dist/ReactToastify.css';
import '../src/utils/hooks/drawer-hook/drawer.scss';
import '../src/app/theme.scss';
import '../src/app/theme-fix.scss';
But any .css
or '.scss' file imported by a component is ignored.
@dyaeger did it work when you added the styles file imports to preview.js?
@akhiltheguitarist - It did but with over 50 different components it is just too much to be importing by hand. Perhaps fine if it's a new project and users are weary of needing to do this for each component with its own css
file? For now I've downgraded storybook.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
I have been encountering the same issue, only when building storybook and deploying it. Launching storybook in dev mode, it seems to load the styles correctly.
"@storybook/addon-a11y": "^6.0.16",
"@storybook/addon-actions": "^6.0.16",
"@storybook/addon-docs": "^6.0.16",
"@storybook/addon-essentials": "^6.0.16",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^6.0.16",
Could we somehow get an update regarding this issue?
@ruijdacd Yes, nobody has responded yet.
Try upgrading to 6.1?
npx sb upgrade
Also did you try adding @storybook/preset-scss
?
We changed the way we map static directories in 6.0. It was modified slightly in 6.1.6: https://github.com/storybookjs/storybook/pull/13245
@jonniebigodes can you track this down?
I've setup a repo here to test this issue. So far i was unable to replicate the issue.
The repo contains three branches:
preview.js
as it's a "high order css" required. The css that the component is using is loaded locally.Testing done:
Based on testing done the css was loaded correctly into the component in Storybook. If anyone is willing to share a more complex based on the comment here i'm willing to adjust accordingly and test it further. Because the only possible issue here is that there could be a clash between Storybook's own css and some external /local css implementation.
Feel free to let me know and we'll take it from there.
Stay safe all.
@jonniebigodes we're using scss and tailwind here... I can confirm that no scss imported in component level are considered... styles are completely ignored.
And I can't even understand how can storybook load a jsx file and ignore scss that is imported within... but it is exactly what's happening.
@Hamdan85 if you could push a small repo and share it we'd appreciate it and help us get to the bottom of this. Sounds good?
unfortunatelly no because it's my company's code... But man, nothing much... using a react component that imports a scss file already causes it.
Em seg., 1 de fev. de 2021 às 22:05, jonniebigodes notifications@github.com escreveu:
@Hamdan85 https://github.com/Hamdan85 if you could push a small repo and share it we'd appreciate it and help us get to the bottom of this. Sounds good?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/12144#issuecomment-771271708, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOMOSSKBKVU2MD2LXZQGEDS45FWBANCNFSM4QFJ6Y6Q .
@jonniebigodes for your setup repo, can you try importing a scss file in preview.js instead? Because that is the issue I'm having currently. When in development mode, it runs fine - but is somehow missing when built
I can confirm css files work, using sass to preprocess the scss files before build/dev into css files. But I feel like this is more of a hack than a real solution...
Hi there, I've landed on this thread after experiencing the same issue. That is, everything is fine for me in development, but when I build my Storybook instance, the .scss
file that is imported in my main component file doesn't seem to be gathered during the build, and my outputted build doesn't have the, or any, expected styles with it.
The project is open-source and is here. It is a very simple exported component. I build my Storybook instance to the ./docs
folder so it's served with GitHub pages.
I recently updated the Storybook instance to > 6, and that's when the "css missing in production" issue started happening.
"@storybook/addon-a11y": "^6.1.20",
"@storybook/addon-actions": "^6.1.20",
"@storybook/addon-essentials": "^6.1.20",
"@storybook/addon-links": "^6.1.20",
"@storybook/react": "^6.1.20",
"typescript": "^4.2.2"
To alleviate the issue for now, I've imported an already built version of my .css
directly into a preview-head.html.
Here are a few of the things I've tried:
@storybook/preset-scss
instead of my custom main.js
style handling.import './react-mailchimp-email-signup-form.scss';
directly into my .storybook/preview.js as a few people suggest - and nothing, still no css in the final build.sass-loader
to "^10.1.1"
from 11
like some threads suggested.I wanted to document this here because while I'm sure it's a small thing, it's kinda an important issue that needs to be sorting out. Hopefully the information provided can help track it down. Thank you.
I can also confirm this behavior on a Vue-based project. Tried different things but it seems that any kind of scss is ignored when building the docs.
This works:
<style>
.trigger {
background: blue;
}
</style>
This doesn't work:
<style lang="scss">
.trigger {
background: blue;
}
</style>
Doesn't work either:
<style lang="scss">
@import "./trigger.scss";
</style>
Same issue, "vue": "^2.6.11" "@storybook/vue": "^6.1.21",
global level scss loads and compiles in component style does nothing
or any scenarios described by @andreitere
I tested the front end of my application and vue is loading the style just fine in the component. This is a really nasty bug. Trying to down grade to 6.0.0.....
This is happening with vue with vuetify, any update to version 6,
Some more info, if i import each of the files, from vuetify, it works.
I had the same issue where styles using SCSS in Vue Single File Components where ignored when building the Storybook using build-storybook
:
<style lang="scss">
// ...
</style>
When the style was marked as css
it worked fine. I managed to fix it for scoped
styles, too, with the same solution.
Note that my Vue components are in a Yarn workspace and they are split in several packages that are marked as ES Modules using "type": "module"
in their package.json
. They are also marked as "sideEffects": false
to enable tree-shaking.
I managed to fix this by adding a new rule for scss
files and marking them as having side-effects. Without sideEffects: true
this didn't work for me either.
// .storybook/main.js
module.exports = {
// ... other non-important stuff
webpackFinal: (config) => {
config.module.rules.push({
test: /\.scss$/,
sideEffects: true,
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
});
return config;
},
};
I am now trying this in Svelte, same issue. I tried @Sumolari 's solution, no improvement. global level scss loads and compiles in component style does nothing
@Sumolari Thank You Sir! It worked for me in SFC with vue3
If smb still has problem of using css-modules in storybook with this solved the issue for me - https://github.com/Negan1911/storybook-css-modules-preset
^ Great addon. Works perfectly
For me, putting sideEffects: true
solved the issue
// .storybook/main.js
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.s?css$/,
sideEffects: true,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `@import "@/assets/scss/_variables.scss";`
},
}
],
include: path.resolve(__dirname, '../')
})
return config
}
}
Webpack
// .storybook/webpack.config.js
const path = require('path')
module.exports = ({ config }) => {
config.resolve.alias = {
...config.resolve.alias,
'@': path.resolve(__dirname, '../src')
}
return config
}
Versions
"sass": "^1.39.2",
"sass-loader": "^10.2.0",
"storybook": "^6.3.8",
"vue-style-loader": "^4.1.3"
I solved it using the sass-loader, css-loader and style-loader in main.js:
// File .storybook/main.js
module.exports = {
...
webpackFinal: async (config) => {
config.module.rules.push(
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
);
},
...
};
Incase someone is still facing the issue in 2022. So I had similar issue that everything was working fine just component css module styles were not being picked. I installed these 2 packages npm i --save-dev storybook-css-modules-preset
& npm i --save @storybook/addon-postcss
.
Then in your .storybook folder main.js file inside the addons array ad them like this
`
addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-postcss', <======== 'storybook-css-modules-preset' <======== ],
` And it worked!
Incase someone is still facing the issue in 2022. So I had similar issue that everything was working fine just component css module styles were not being picked. I installed these 2 packages
npm i --save-dev storybook-css-modules-preset
&npm i --save @storybook/addon-postcss
.Then in your .storybook folder main.js file inside the addons array ad them like this
`
addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-postcss', <======== 'storybook-css-modules-preset' <======== ],
` And it worked!
Installing storybook-css-modules-preset
fixes the issue for me. @storybook/addon-postcss
doesn't seem to be necessary for the fix to in my case.
Also, for anyone looking for the solution, make sure you install storybook-css-modules-preset
instead of storybook-css-modules
.
I still have this issue using vue 3 with vite and storybook 7. Should such things not work out of the box? I cant seem to find any documentation that would tell me to do something extra to load my component css.
Surprisingly, despite all the efforts (if any) of the developers, I encountered this 2019 bug in the middle of 2023.
Both version 6 and 7 work equally badly on vite!
Any import from Stylus causes error. SCSS styles imported as CSS, but imported classNames totally ignored.
Do we need to use vanilla HTML/CSS in 2023 to use Storybook?
same issue here. :/
Same now, nothing above helped (Vue 2 + Storybook 6/7)
Greetings from March 2024!
Is there no solution yet to this issue? (Storybook 7.6.10 + React 18)
We're just migrating everything to tailwind, hours and hours of messing with it and it never worked 😵💫
Any updates on this issue? Storybook v8.0.9 React v18.2.0
I created a react app using create-react-app, and added a button component, a css for the button. When I load the story for the button, the styles are not loaded for the button. Pasting below, the related files. Is there any configuration that I am to do, to get this up and running with styles?
github repo for the project
Component: index.js
style.css:
Story file:
System info: