Struggling to apply custom global styles in Storybook using theme-default.scss file. Components are loading but styles are not being applied despite following Storybook's official documentation on custom webpack configuration (not very familiar with webpack).
Below is the content of my .storybook/main.js file:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
stories: ['../src/**/*.stories.ts'],
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-notes'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../')
});
return config;
}
};
Encountering errors like mentioned below:
Error message here.
Attempted using inline loader syntax as suggested here. Content of my .storybook/preview.js:
import '!style-loader!css-loader!sass-loader!./_common.scss';
Inside _common.scss:
@import '../src/theme-default.scss';
@import '../src/styles.scss';
No error shown, but styles are still not applying.
Included angular.json file for reference.
{ Angular JSON content here }Also tried implementing this approach using sass-resources-loader.
Tried various solutions with no success. Any assistance would be highly appreciated. Thank you!