Closed chan-dev closed 1 year ago
I'm not sure whether this is a dupe to the other Angular 8 bugs, so I'm marking it as high priority in the hopes that somebody from the Angular world has a chance to look at it.
@shilman Thanks, i really want to start learning this tool but currently got stuck with this bug.
if you add your own sass loader chain, you have to remove the storybooks just before pushing your own one like:
const isStorybookSassLoader = (rule) => rule.test && rule.test.toString() === '/\\.s(c|a)ss$/')
config.module.rules = config.module.rules.filter((rule) => !isStorybookSassLoader(rule));
It matches just the storybooks test regex in https://github.com/storybookjs/storybook/blob/a65bd69bbe0e5dff716f8295785ac4fd60214d4e/app/angular/src/server/framework-preset-angular.ts#L38 and removes it from the rules.
Be aware that this can break at any storybook update. And be aware that if you do that, you have to inject global css into the document yourself and hot reloading wont work for those global styles anymore.
Similar to what @sod did, I had to change 2 webpack rules to make it work. It is somewhat hacky, and any suggestions on the correct way to modify webpack rules are welcome!
//.storybook/webpack.config.js
module.exports = async ({ config, mode }) => {
let scssLoader = config.module.rules.find(i => !!'a.scss'.match(i.test));
scssLoader.use = ['to-string-loader', ...scssLoader.use];
let htmlLoader = config.module.rules.find(i => !!'a.html'.match(i.test));
htmlLoader.loader = 'html-loader';
return config;
};
@Tallyb solution worked for me.
I did have to install, to-string-loader and html-loader.
Thanks for the workaround!
Hello!, Sorry for wakeup this issue, I'm using storybook 5.2.6, with angular and sass and I have the problems of this issue. When i try to fixed it using @Tallyb solution, the storybook builds but it doesn't apply any scss sidecar files for my components...
I have tried almost everything:
@gpulido
This seems to work for me in angular 8.2.14 and SB 5.2.6 under the storybook/webpack.config.js:
module.exports = async ({ config, mode }) => {
let scssLoader = config.module.rules.find(i => !!'a.scss'.match(i.test));
scssLoader.use = [
'to-string-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
];
let htmlLoader = config.module.rules.find(i => !!'a.html'.match(i.test));
htmlLoader.loader = 'html-loader';
console.dir(config.module.rules, {depth: 10, colors: true});
return config;
};
@Tallyb Thank you!! It solved the problem, I have also added the includepaths on the options so I can use the "@import 'app'" on the scss.
@Tallyb Thank you!! It solved the problem, I have also added the includepaths on the options so I can use the "@import 'app'" on the scss.
Hello, how do can I make the same? Where I need to go? Please help me :(
@luenmuvel you need to add the @Tallyb solution on the storybook/webpack.config.js
@Tallyb and @sod 's solutions didn't work for me either. Getting the same includePaths
error
Spoke too soon. Wasn't the above solutions for me, but an upgrade to the new 5.3.2
via that npx npm-check-updates '/storybook/' -u && npm install
script, then dumping package-lock.json
and node_modules
and re-running npm install
. Up and running now!
Gonna close this and see who complains 🙈
Replicable with the following:
My Angular project has a configuration in angular.json
similar to the following:
"stylePreprocessorOptions": {
"includePaths": [...]
}
This make storybook complains "options has an unknown property "includePaths".
My guess is that my current Angular project (8.2.14) relies on a sass-loader
of version 7+, but sotrybook (5.3.6) relies on version 8+ which introduced breaking change to option's validation schema?
I've also checked relevant changes on Angular side, they have this upgrade introduce in v9.0 which is not released yet
https://github.com/angular/angular-cli/commit/2c8b12f45c6f3cd779e860c809db03059b5754b5
So the changes on Storybook side obviously break angular project from being use stylePreprocessorOptions
properly.
I followed the tutorial and I got tons of issues. Could somebody try to setup the project with the newest angular and sass?
By forcing sass-loader
to version 7 I was able to run storybook again.
yarn add --dev sass-loader@7.3.1
Does anyone have better ideas?
Can confirm this is still an issue with v6.1.9. Can confirm that the @storybook/preset-scss
project doesn't fix it either.
Using sass-loader version 7 fixes the issue
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!
Closing. Storybook 7 only supports Angular greater or equal then v14.
Describe the bug First off, it's my first time using storybook. So i followed the tutorial in the documentation in the Angular section as it is. But Storybook doesn't work as expected.
Since i'm using scss for my Angular project, i also extended the config with this code as stated in the document as well.
Expected behavior It works as expected with Angular 8
Screenshots
Code snippets
package.json
System: Environment Info:
System: OS: Windows 10 CPU: (4) x64 Intel(R) Core(TM) i5 CPU M 560 @ 2.67GHz Binaries: Node: 12.8.1 - C:\Program Files\nodejs\node.EXE npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.267.0 npmPackages: @storybook/addon-actions: ^5.1.11 => 5.1.11 @storybook/addon-links: ^5.1.11 => 5.1.11 @storybook/addon-notes: ^5.1.11 => 5.1.11 @storybook/addons: ^5.1.11 => 5.1.11 @storybook/angular: ^5.1.11 => 5.1.11