Storybook: Angular webpack.config SASS bug

[amorenew]

Issue details

What did you expect to happen?
The storybook will compile
What happened instead?
I got an error

Module build failed: Syntax Error
(2:1) Unknown word

Steps to reproduce

yarn storybook

Please specify which version of Storybook and optionally any affected addons that you're running

"bootstrap": "4.0.0",
"@storybook/angular": "3.4.0-rc.2",

Screenshots / Screencast / Code Snippets (Optional)

my webpack.config.js

const path = require("path");

const genDefaultConfig = require("@storybook/angular/dist/server/config/defaults/webpack.config.js");

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  const cssRule = config.module.rules.find(rule => rule.test && rule.test.toString() === "/\\.css$/");
  if (cssRule) {
    cssRule.exclude = /\.component\.css$/;}

  const cssRule2 = config.module.rules.find(
    rule => rule.test && rule.test.toString() === "/\\.(html|css)$/" );

  if (cssRule2) {
    cssRule2.exclude = /bootstrap\.css$/;}

  config.module.rules.unshift({
    test: /\.component.scss$/,
    loaders: ["raw-loader", "sass-loader"],
    include: path.resolve(__dirname, "../src")});

  config.module.rules.unshift({
    test: /\.component.css$/,
    loaders: ["raw-loader", "css-loader"],
    include: path.resolve(__dirname, "../src")});

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

  return config;
};

My Error:

ERROR in ./src/app/pages/login/login.component.scss
Module build failed:
@import '~sass/abstracts/variables';
^
      File to import not found or unreadable: ~sass/abstracts/variables.
Parent style sheet: stdin
      in D:\frontend\projects\travesys-platform\src\app\pages\login\login.component.scss (line 1, column 1)
 @ ./src/app/pages/login/login.component.ts 22:21-54
 @ ./stories/index.ts
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/angular/dist/server/config/polyfills.js ./node_modules/@storybook/angular/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: Syntax Error

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../raw-loader/index.js!../../../postcss-loader/lib/index.js??embedded!../../../style-loader/index.js!../../../css-loader/index.js??ref--15-1!../../../postcss-loader/lib/index.js??postcss!./bootstrap.min.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

 @ multi ./src/sass/styles.scss ./node_modules/bootstrap/dist/css/bootstrap.min.css
Child html-webpack-plugin for "index.html":

[bmayen]

I can verify this as well. Looks like it's also failing on TS imports using path aliases defined in my tsconfig. Early-morning guess: not picking up the 'root' folder from .angular-cli?

[igor-dv]

Did it work before the rc version ?

[bmayen]

I don't know. First-time user.

[amorenew]

@igor-dv I tried stable version but same issue
I think it is related to bootstrap.min.css
so it would be a css webpack wrong config

[amorenew]

similar issues:
https://github.com/webpack-contrib/css-loader/issues/295
https://github.com/webpack-contrib/css-loader/issues/617
https://github.com/storybooks/storybook/issues/3100
maybe bootstrap 4 using postcsswhich need a specific loader like the Vue issue here
https://github.com/vuejs/vue-loader/issues/74

[igor-dv]

What happens if you remove all the css related rules from your extended webpack.config?
☝️ this is regarding the first error I see.

Regarding the bootstrap, looks like there is a loaders mess - you have a postcss applied twice and the style-loader before the raw-loader...

[amorenew]

@igor-dv the issue is not in bootstrap it is related to SASS and importing "@import" other SASS files
in this commit, I added sass:
@import '~sass/styles';
https://github.com/amorenew/travel-angular/commit/24b8d919961955684d4db45c8ebfecffe56e8e18

then the bug happened
while inner SASS is compiled

[igor-dv]

The documentation of sass-loader a bit confused me, but I managed to make it work in your master

1. You have to provide an alias for the sass folder - that is how sass-loader knows to resolve it in the end

module.exports = baseConfig => {    
    baseConfig.resolve.alias = {
        ...baseConfig.resolve.alias,
        'sass': 'pass to sass', // <---
    };

    return baseConfig;
};

1. You need to import the styles like this:

@import '~sass/styles';  // <--- not "~/"

1. I've commented out all the imports in the sass/styles.scss file, because I didn't know what they are 🤷‍♂️

2. After all, there was an error, because you didn't install @storybook/addons which is a peer dep for all addons.

[amorenew]

@igor-dv
in 'pass to sass'
it will be ./src/sass or ../src/sass
or could you share your webpack.config?
thank you.

[igor-dv]

I just put there a full path to sass dir, because I was lazy =) I think you need to add there something like;

const path = require('path');
///
///
  baseConfig.resolve.alias = {
        ...baseConfig.resolve.alias,
        'sass': path.join(process.pwd(), 'src/sass'),
    };
///

[amorenew]

@igor-dv
yes now it is working just change pwd() to cwd()
Thanks a lot 👍