I am trying to load a custom global style file, theme-default.scss in storybook. Although my components are loading in storybook but styles are not being applied.I followed this tutorial Storybook official docs of custom webpack config. (I am not very familiar to webpack though)
here is my .storybook/main.js file
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//import '!style-loader!css-loader!../src/stories/stories.scss'; // for scss
module.exports = {
stories: ['../src/**/*.stories.ts'],
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-notes'],
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../')
});
// Return the altered config
return config;
}
};
It is giving me following error
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
on line 1 of D:\code2\mawani\mawani-angular-client\dpd-billing\src\app\app.component.scss
>> var api = require("!../../node_modules/style-loader/dist/runtime/injectStyle
^
@ ./src/app/app.component.ts 45:18-49 45:61-92 45:104-135 45:147-178
@ ./src/app/app.module.ts
@ ./src/stories/containers/SearchBar.stories.ts
@ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.ts[\\/]?)$
@ ./.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/theme-default.scss ./src/styles.scss
ERROR in ./src/app/modules/feature/public/page-not-found/page-not-found.component.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
on line 1 of D:\code2\mawani\mawani-angular-client\dpd-billing\src\app\modules\feature\public\page-not-found\page-not-found.component.scss
>> var api = require("!../../../../../../node_modules/style-loader/dist/runtime
^
@ ./src/app/modules/feature/public/page-not-found/page-not-found.component.ts 12:18-60 12:72-114 12:126-168 12:180-222
@ ./src/app/app.module.ts
@ ./src/stories/containers/SearchBar.stories.ts
@ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.ts[\\/]?)$
@ ./.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/theme-default.scss ./src/styles.scss
^
Then, I tried using inline loader syntax as mentioned in this comment Here is how my .storybook/preview.js looks
import '!style-loader!css-loader!sass-loader!./_common.scss';
Inside _common.scss
@import '../src/theme-default.scss';
@import '../src/styles.scss';
Although it is not giving any error but still styles are not getting applied!
Here is my angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xyz": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/xyz",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/theme-default.scss",
"src/styles.scss"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "xyz:build"
},
"configurations": {
"production": {
"browserTarget": "xyz:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "xyz:build"
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "xyz:serve"
},
"configurations": {
"production": {
"devServerTarget": "xyz:serve:production"
}
}
}
}
}
},
"defaultProject": "xyz",
"cli": {
"analytics": ""
}
}
I have also tried using this approach sass-resources-loader
I have done a lot of trial and error but could not figure out solution. Any help would be appreciated. Thanks!
