Closed codestitch closed 5 years ago
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader",
options: {
javascriptEnabled: true
}
}
],
include: path.resolve(__dirname, "../")
}
]
}
};
Try this solution, it worked for me, the only difference is I used this configuration for LESS.
cc @tmeasday
@codestitch -- what is the content of button.component.scss
? Can you upload your code somewhere?
Hi, @tourniquet, less is fine. As I stated in my problem less has no problem. only when I call .scss files from config.js. And it didn't work.
Hi, @tmeasday. There's no style for button.component.scss... I am making my styles in the global such as styles.scss outside of app folder. That's why I'm trying to import styles.scss in config.js coz importing styles.less works in config.js. Or there could be another way of importing styles.scss other than in config.js.
Hi @codestitch - but the error above looks like you are importing that file - and it looks like a JS file?
yes @tmeasday ... it's saying that there is an error in button.component.scss file, but there are not styling in that file... that's what perplexed me. When I use this sass-loader in webpack.config.js, i'm having that error.
module.exports = {
module: {
rules: [{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../")
}]
}
};
but if i'm using a less loader in webpack.config.js, it's just ok.
the only place i'm importing styling is in config.js
@codestitch as a guess I'd say that by adding the above rule, your webpack config is now treating .scss
files as SASS files rather than default (which is to load them with file-loader
which I think just dumps their contents into a string). So if you have import ./button.component.scss
which contains JS it'd explain that error.
this is the structure of my button.component
The button.component.scss files doesn't contain anything.. this is the project.
Oh, you know what, this could be a problem with file loader, maybe. I don't think you need to do this any more with SB5 but previously I think I had a similar issue with svgs that I avoided with:
// in .storybook/webpack.config.js
const fileLoader = storybookBaseConfig.module.rules.find(
r => r.loader && r.loader.match('file-loader')
);
fileLoader.exclude = /\.svg/;
Try that with /\.scss/
and see if it helps?
I tried it but gave me an error.
is there a way of adding a global style in all the stories?
Sorry, storybookBaseConfig
was the first argument to the function exported by webpack.config.js
in SB4.
is there a way of adding a global style in all the stories?
You can do it like this: https://storybook.js.org/docs/configurations/add-custom-head-tags/
is there a way of adding a global style in all the stories?
You can do it like this: https://storybook.js.org/docs/configurations/add-custom-head-tags/
Thanks, @tmeasday. But how do I include my own styles from the project, like styles.css inside /stories folder?
At the top of my .storybook/config.js I added:
import "antd/dist/antd.less"
I think you can import your styles in the same way. PS: The only way this works is to add at the very top of the file, in the first line
My bad. I looked at the iframe and the style are already there. Sorry for wasting your time @tmeasday .
So, this code
import '!style-loader!css-loader!../stories/styles.scss';
works in config.js instead of import "../stories/styles.scss";
or require('../stories/styles.scss');
!
but the webpack.config.js example in the documentation really doesn't work.
Thanks a lot.
Another question though, @tmeasday. I'm using NX and has multiples apps and each app is using different UI library. App1 is using bootstrap and clarity and app2 is using clarity and app3 is using angular material. Now, What I notice is that SB looks at the 1st app's styles in angular.json w/c is App1 so it has two styles bootstrap and clarity.
Is there a way to control where SB will look to get what style, say i only want SB to have base style of clarity? coz' SB just automatically loads the styles used in App1.
Thanks.
Hey @codestitch you probably just need to carefully consider the import chain -- if your storybook imports a story, which itself imports a component which imports a style file, that style file will end up in the storyboook.
If the component imports a library which imports a ... etc etc -- so you just need to figure out how the bootstrap files are getting imported.
I guess I am going to close this as the issue has been resolved?
I tried it but gave me an error.
Hey @codestitch, sorry to bother you - I'm having the same issue, but it's not super clear to me how you ended up resolving it. Did you find a way to resolve this error?
Sure @albertjke. You can check my repo at https://github.com/codestitch/sbnx.
it's using version 5.0.6 though. What I did there is I added this line:
import '!style-loader!css-loader!../stories/stories.scss';
to config.js file.
PS. When running npm run storybook
you will encounter an error as I purposely do that for some issue. you can remove the ListComponent in the story to view the working one.
@codestitch little fix for scss (sass-loader):
import '!style-loader!css-loader!sass-loader!../styles/main.scss';
to config.js file. Work for me with HMR.
@magisters-org
import '!style-loader!css-loader!sass-loader!../styles/main.scss';
This works but it outputs:
DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.
See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
Here is another solution I found, because I got Invalid CSS after "": expected 1 selector or at-rule
: https://github.com/storybookjs/storybook/issues/6467#issuecomment-481425563 (fix for the full-control example here)
@shiftgeist here's more about the deprecation https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#Deprecate-webpack-extend-mode
@codestitch little fix for scss (sass-loader):
import '!style-loader!css-loader!sass-loader!../styles/main.scss';
to config.js file. Work for me with HMR.
this works fine for local scss files, but not working for importing scss files from node_modules
. any idea ?
@jaydeep987
this works fine for local scss files, but not working for importing scss files from
node_modules
. any idea ?
I'm having this same issue. Have you found any workarounds?
Same here :(
I got this problem to with typescript project.
I solved this by removing the !style-loader!css-loader!sass-loader!
from the scss import in my preview.js
. This allowed the scss to be imported with the defined webpack loaders.
My bad. I looked at the iframe and the style are already there. Sorry for wasting your time @tmeasday .
So, this code
import '!style-loader!css-loader!../stories/styles.scss';
works in config.js instead of import"../stories/styles.scss";
orrequire('../stories/styles.scss');
!but the webpack.config.js example in the documentation really doesn't work.
Thanks a lot.
This doesn't work: ERR! import '!style-loader!css-loader!../styles/core.scss'; ERR! ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ERR! ERR! SyntaxError: Unexpected string
I had a difficult time using custom config. Logged the https://github.com/storybookjs/storybook/issues/11052
Solved it!
As a work around i mutated the config object to inject common scss. For more explaination & implementation checkout the blog i wrote on this topic.
To universally @import
Sass styles, including from node_modules, something like this in your webpackFinal
in main.js
:
config.module.rules.push(
{
test: /\.scss$/,
use: [
{
loader: "sass-loader",
options: {
implementation: require("sass"),
prependData: '@import "./css/lib";', // add our scss variables etc any components
sassOptions: {
includePaths: ["./node_modules"] // resolve paths
}
}
}
);
(n.b. exact sass-loader options vary, this is sass-loader@8, webpack@5)
@tobystokes I lost a lot of time trying to figure this out, and after a lot of trial and error, I came accross your answer here. Nice one. It saved me a lot of headache.
@nirus, whenever you have a solution, post it on the thread; otherwise, people like me need to necro it and say: your link is not working.
The bug I followed this tutorial in starting storybook. Though the tutorial is using less, I decided to use scss.
When I import my styles.scss into the config.js in .storybook with this configuration in webpack.config.js
as per https://storybook.js.org/configurations/custom-webpack-config/, it gives me an error.
If I try to change the webpack.config.js to this solution: it doesn't do anything.
Reproduce Steps to reproduce the behavior:
from official tutorial.
And then install node-sass.
Then run
npm run storybook
.Expected behavior I should be able to see styles from whatever is in styles.scss
Screenshots
Code snippets package.json
config.js
webpack.config.js
System:
Source Code HERE.