Webpack configuration - Webpack SCSS loader rule looks wrong

[michaelgeorgeattard]

I am trying to import a ".scss" file in a story file as below:

import  "./test.scss";

Style is however not applied to the current story. Base webpack.config.js seems to have a .scss rule already, so following https://storybook.js.org/configurations/custom-webpack-config/ I added webpack.config.js in .storybook and tried to do the following:

const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
	// Here storybookBaseConfig.module.rules[3]) is the following:
	// {
	//	test: /\.scss$/,
	//	loaders: [
	//		'C:\\git\\foo\\node_modules\\raw-loader\\index.js',
	//		'C:\\git\\foo\\node_modules\\sass-loader\\lib\\loader.js'
	//	]
	// }

	// The following works:
	storybookBaseConfig.module.rules[3] = {
		test: /\.scss$/,
		loaders: ["style-loader", "css-loader", "sass-loader"],
		include: path.resolve(__dirname, '../')
	};

	return storybookBaseConfig;
};

I am using 3.4.0-alpha.5. Is there an issue with the base Webpack configuration. If so I can create a PR with the fix.

[igor-dv]

If you are using angular-cli, you should get rules according to this latest change (there was a discussion - #2688).
Having both scoped styles (styleUrls) and global styles (import) in the config led us to the rules collision.

Can you please explain your certain use case? How do you use this scss file in your main app?

[michaelgeorgeattard]

@igor-dv Components that are being tested in isolation depend on Ionic and I want to load their CSS globally.
That is the use case I've come up with so far, correct me if I'm missing something.

[igor-dv]

How do you import these styles into your main app?

[michaelgeorgeattard]

Styles are loaded from an entry ".scss" using Webpack, these provide rules globally for Ionic components.

[igor-dv]

CC. @Quramy , @amcdnl , @alterx -WDYT ? Can we support this behavior by default as well? Or it's a rare case and extending webpack.config is ok?

[Quramy]

Can we support this behavior by default as well?

I'm not familiar with Ionic. I think that If this behavior is brought by Ionic CLI, this is not rare and we should support this pattern.

Is the following rule needed with almost all IonicCLI based projects ?

	// The following works:
	storybookBaseConfig.module.rules[3] = {
		test: /\.scss$/,
		loaders: ["style-loader", "css-loader", "sass-loader"],
		include: path.resolve(__dirname, '../')
	};

[michaelgeorgeattard]

Just a minor clarification from my end; library I am trying to include Storybook in is not the main application. It is built using Rollup and is imported by the main application, which in turn is built using Webpack.

[stale]

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 60 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!