Error importing styles.scss to storybook #5684

codestitch · 2019-02-20T17:11:41Z

The bug
I followed this tutorial in starting storybook. Though the tutorial is using less, I decided to use scss.

When I import my styles.scss into the config.js in .storybook with this configuration in webpack.config.js

const path = require("path");

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

as per https://storybook.js.org/configurations/custom-webpack-config/, it gives me an error.

If I try to change the webpack.config.js to this solution: it doesn't do anything.

Reproduce
Steps to reproduce the behavior:

Go to https://www.learnstorybook.com/angular/en/get-started/ and use sass styling.
Continue through https://www.learnstorybook.com/angular/en/simple-component/
Upon setting config.js instead of styles.less use styles.scss
Upon setting webpack.config.js use this config instead:

const path = require("path");

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

from official tutorial.

And then install node-sass.

Then run npm run storybook.

Expected behavior
I should be able to see styles from whatever is in styles.scss

Screenshots

Code snippets
package.json

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "node-sass": "^4.11.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.2",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2",
    "@babel/core": "^7.3.3",
    "babel-loader": "^8.0.5",
    "@storybook/angular": "^4.1.12",
    "@storybook/addon-notes": "^4.1.12",
    "@storybook/addon-actions": "^4.1.12",
    "@storybook/addon-links": "^4.1.12",
    "@storybook/addons": "^4.1.12"
  }

config.js

import { configure } from '@storybook/angular';

import '../src/styles.scss';

// automatically import all files ending in *.stories.ts
const req = require.context('../src/stories', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

webpack.config.js

const path = require("path");

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

System:

OS: Windows10
Device: Laptop
Browser: chrome
Framework: angular
Addons: [if relevant]
Version: ["@angular/core": "~7.2.0", "@storybook/angular": "^4.1.12"]

Source Code HERE.

The text was updated successfully, but these errors were encountered:

tourniquet · 2019-02-25T11:28:58Z

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader",
            options: {
              javascriptEnabled: true
            }
          }
        ],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

Try this solution, it worked for me, the only difference is I used this configuration for LESS.

shilman · 2019-02-25T14:59:46Z

cc @tmeasday

tmeasday · 2019-02-25T21:53:25Z

@codestitch -- what is the content of button.component.scss? Can you upload your code somewhere?

codestitch · 2019-02-27T10:25:47Z

Hi, @tourniquet, less is fine. As I stated in my problem less has no problem. only when I call .scss files from config.js. And it didn't work.

codestitch · 2019-02-27T10:29:14Z

Hi, @tmeasday. There's no style for button.component.scss... I am making my styles in the global such as styles.scss outside of app folder. That's why I'm trying to import styles.scss in config.js coz importing styles.less works in config.js. Or there could be another way of importing styles.scss other than in config.js.

tmeasday · 2019-02-27T10:31:30Z

Hi @codestitch - but the error above looks like you are importing that file - and it looks like a JS file?

codestitch · 2019-02-27T13:34:22Z

yes @tmeasday ... it's saying that there is an error in button.component.scss file, but there are not styling in that file... that's what perplexed me. When I use this sass-loader in webpack.config.js, i'm having that error.

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

but if i'm using a less loader in webpack.config.js, it's just ok.

the only place i'm importing styling is in config.js

tmeasday · 2019-02-28T00:38:38Z

@codestitch as a guess I'd say that by adding the above rule, your webpack config is now treating .scss files as SASS files rather than default (which is to load them with file-loader which I think just dumps their contents into a string). So if you have import ./button.component.scss which contains JS it'd explain that error.

codestitch · 2019-02-28T10:06:28Z

this is the structure of my button.component

The button.component.scss files doesn't contain anything.. this is the project.

tmeasday · 2019-02-28T12:09:43Z

Oh, you know what, this could be a problem with file loader, maybe. I don't think you need to do this any more with SB5 but previously I think I had a similar issue with svgs that I avoided with:

 // in .storybook/webpack.config.js
 const fileLoader = storybookBaseConfig.module.rules.find(
   r => r.loader && r.loader.match('file-loader')
 );
 fileLoader.exclude = /\.svg/;

Try that with /\.scss/ and see if it helps?

codestitch · 2019-03-05T10:41:41Z

I tried it but gave me an error.

codestitch · 2019-03-05T10:44:24Z

is there a way of adding a global style in all the stories?

tmeasday · 2019-03-05T11:59:30Z

Sorry, storybookBaseConfig was the first argument to the function exported by webpack.config.js in SB4.

tmeasday · 2019-03-05T12:00:43Z

is there a way of adding a global style in all the stories?

You can do it like this: https://storybook.js.org/docs/configurations/add-custom-head-tags/

codestitch · 2019-03-05T15:18:10Z

is there a way of adding a global style in all the stories?

You can do it like this: https://storybook.js.org/docs/configurations/add-custom-head-tags/

Thanks, @tmeasday. But how do I include my own styles from the project, like styles.css inside /stories folder?

tourniquet · 2019-03-05T15:37:15Z

At the top of my .storybook/config.js I added:

  import "antd/dist/antd.less"

I think you can import your styles in the same way.
PS: The only way this works is to add at the very top of the file, in the first line

codestitch · 2019-03-05T15:58:46Z

My bad. I looked at the iframe and the style are already there. Sorry for wasting your time @tmeasday .

So, this code
import '!style-loader!css-loader!../stories/styles.scss'; works in config.js instead of import "../stories/styles.scss"; or require('../stories/styles.scss');!

but the webpack.config.js example in the documentation really doesn't work.

Thanks a lot.

codestitch · 2019-03-05T16:31:18Z

Another question though, @tmeasday. I'm using NX and has multiples apps and each app is using different UI library.
App1 is using bootstrap and clarity and app2 is using clarity and app3 is using angular material. Now, What I notice is that SB looks at the 1st app's styles in angular.json w/c is App1 so it has two styles bootstrap and clarity.

Is there a way to control where SB will look to get what style, say i only want SB to have base style of clarity? coz' SB just automatically loads the styles used in App1.

Thanks.

tmeasday · 2019-03-06T00:06:38Z

Hey @codestitch you probably just need to carefully consider the import chain -- if your storybook imports a story, which itself imports a component which imports a style file, that style file will end up in the storyboook.

If the component imports a library which imports a ... etc etc -- so you just need to figure out how the bootstrap files are getting imported.

tmeasday · 2019-03-06T00:06:49Z

I guess I am going to close this as the issue has been resolved?

albertjke · 2019-04-01T19:33:11Z

I tried it but gave me an error.

Hey @codestitch, sorry to bother you - I'm having the same issue, but it's not super clear to me how you ended up resolving it. Did you find a way to resolve this error?

codestitch · 2019-04-04T11:48:29Z

Sure @albertjke. You can check my repo at https://github.com/codestitch/sbnx.

it's using version 5.0.6 though. What I did there is I added this line:

import '!style-loader!css-loader!../stories/stories.scss';

to config.js file.

PS. When running npm run storybook you will encounter an error as I purposely do that for some issue. you can remove the ListComponent in the story to view the working one.

magisters-cc · 2019-04-26T12:16:38Z

@codestitch little fix for scss (sass-loader):

import '!style-loader!css-loader!sass-loader!../styles/main.scss';

to config.js file. Work for me with HMR.

shiftgeist · 2019-07-09T10:04:33Z

@magisters-org

import '!style-loader!css-loader!sass-loader!../styles/main.scss';

This works but it outputs:

DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode

Here is another solution I found, because I got Invalid CSS after "": expected 1 selector or at-rule: #6467 (comment) (fix for the full-control example here)

shilman · 2019-07-09T13:39:41Z

@shiftgeist here's more about the deprecation https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#Deprecate-webpack-extend-mode

jaydeep987 · 2020-02-12T05:58:18Z

@codestitch little fix for scss (sass-loader):
import '!style-loader!css-loader!sass-loader!../styles/main.scss'; 
to config.js file. Work for me with HMR.

this works fine for local scss files, but not working for importing scss files from node_modules. any idea ?

popthestack · 2020-02-20T04:25:10Z

@jaydeep987

this works fine for local scss files, but not working for importing scss files from node_modules. any idea ?

I'm having this same issue. Have you found any workarounds?

AlexanderMelox · 2020-03-18T23:00:12Z

Same here :(

B3Kay · 2020-04-09T14:50:33Z

I got this problem to with typescript project.

popthestack · 2020-05-18T19:48:51Z

I solved this by removing the !style-loader!css-loader!sass-loader! from the scss import in my preview.js. This allowed the scss to be imported with the defined webpack loaders.

caseytrombley · 2020-05-19T14:03:52Z

My bad. I looked at the iframe and the style are already there. Sorry for wasting your time @tmeasday .

So, this code
import '!style-loader!css-loader!../stories/styles.scss'; works in config.js instead of import "../stories/styles.scss"; or require('../stories/styles.scss');!

but the webpack.config.js example in the documentation really doesn't work.

Thanks a lot.

This doesn't work:
ERR! import '!style-loader!css-loader!../styles/core.scss';
ERR! ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ERR!
ERR! SyntaxError: Unexpected string

nirus · 2020-06-06T17:14:33Z

I had a difficult time using custom config. Logged the #11052

Solved it!

As a work around i mutated the config object to inject common scss. For more explaination & implementation checkout the blog i wrote on this topic.

tobystokes · 2021-07-28T10:05:16Z

To universally @import Sass styles, including from node_modules, something like this in your webpackFinal in main.js:

config.module.rules.push(
  {
    test: /\.scss$/,
    use: [
      {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
              prependData: '@import "./css/lib";', // add our scss variables etc any components
              sassOptions: {
                includePaths: ["./node_modules"] // resolve paths
              }
        }
  }
);

(n.b. exact sass-loader options vary, this is sass-loader@8, webpack@5)

AlexHoisan · 2021-09-09T21:30:43Z

@tobystokes
I lost a lot of time trying to figure this out, and after a lot of trial and error, I came accross your answer here.
Nice one.
It saved me a lot of headache.

angelod1as · 2023-07-11T07:48:58Z

@nirus, whenever you have a solution, post it on the thread; otherwise, people like me need to necro it and say: your link is not working.

shilman added help wanted has workaround angular labels Feb 25, 2019

tmeasday closed this as completed Mar 6, 2019

lonyele mentioned this issue Jul 20, 2019

Fix running storybook examples #7506

Closed

sumitsharma22 mentioned this issue Oct 11, 2019

Css loading issue fixes in the storybook it was not bundled before scheduleonce/once-ui#587

Merged

Error importing styles.scss to storybook #5684

Error importing styles.scss to storybook #5684

Comments

codestitch commented Feb 20, 2019 • edited

tourniquet commented Feb 25, 2019 • edited

shilman commented Feb 25, 2019

tmeasday commented Feb 25, 2019

codestitch commented Feb 27, 2019

codestitch commented Feb 27, 2019

tmeasday commented Feb 27, 2019

codestitch commented Feb 27, 2019

tmeasday commented Feb 28, 2019

codestitch commented Feb 28, 2019

tmeasday commented Feb 28, 2019 • edited

codestitch commented Mar 5, 2019

codestitch commented Mar 5, 2019

tmeasday commented Mar 5, 2019

tmeasday commented Mar 5, 2019

codestitch commented Mar 5, 2019

tourniquet commented Mar 5, 2019

codestitch commented Mar 5, 2019 • edited

codestitch commented Mar 5, 2019 • edited

tmeasday commented Mar 6, 2019

tmeasday commented Mar 6, 2019

albertjke commented Apr 1, 2019

codestitch commented Apr 4, 2019 • edited

magisters-cc commented Apr 26, 2019

shiftgeist commented Jul 9, 2019 • edited

shilman commented Jul 9, 2019

jaydeep987 commented Feb 12, 2020

popthestack commented Feb 20, 2020

AlexanderMelox commented Mar 18, 2020

B3Kay commented Apr 9, 2020

popthestack commented May 18, 2020

caseytrombley commented May 19, 2020

nirus commented Jun 6, 2020 • edited

tobystokes commented Jul 28, 2021

AlexHoisan commented Sep 9, 2021

angelod1as commented Jul 11, 2023

codestitch commented Feb 20, 2019 •

edited

tourniquet commented Feb 25, 2019 •

edited

tmeasday commented Feb 28, 2019 •

edited

codestitch commented Mar 5, 2019 •

edited

codestitch commented Mar 5, 2019 •

edited

codestitch commented Apr 4, 2019 •

edited

shiftgeist commented Jul 9, 2019 •

edited

nirus commented Jun 6, 2020 •

edited