Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

storybook: loading shared styles with sass-loader is broken

See original GitHub issue

Current Behavior

Importing shared scss into a Storybook via

// preview.js 
// tried both in the lib's .storybook and the main repo top-level .storybook (neither work)
import "!style-loader!css-loader!sass-loader!../src/styles/styles.scss";

is not working via Nx.

NOTE: It is working with the standard Storybook setup following https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/ and adding custom “shared” scss

Expected Behavior

Expect this to work as per default Storybook - was also working in the past…

Steps to Reproduce

Create an Nx workspace with shared styles as per Nx example repo. https://github.com/nrwl/nx-examples

Import the shared styles via

// preview.js
import "!style-loader!css-loader!sass-loader!../src/styles/styles.scss";

Another report of the same issue here https://github.com/nrwl/nx/issues/7613#issuecomment-1022680386

Failure Logs

No logs are created.

Environment

Nx 13.7.3 Angular 13.2.1 @storybook-angular 6.4.18

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

gkamperiscommented, Feb 21, 2022

@mandarini amazing! thanks for all your help!

1reaction

mandarinicommented, Feb 21, 2022

New docs for styles and stylePreprocessorOptions

Top Results From Across the Web

Import scss file is not working inside storybook file

I'm using sb init to create the storybook file. Everything is working, all the addons loaded but only the style is not working....

Styling and CSS - Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...

Loading Styles - SurviveJS

Webpack provides support for the most popular styling approaches as listed below: To use Less preprocessor, see less-loader. Sass requires sass-loader or fast- ......

Creating a React Component Library using Rollup, Typescript ...

Up until now, we had no shared style-sheets or components. ... Storybook uses Webpack to serve and load JS modules.

Configuring Storybook: 6 Tips You Can't Miss | by Zheng Li

use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../'), });. Config the necessary alias that already ...