Problems loading scss files with Angular 6

[skolldev]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

I'm using the default configs for everything - webpack and storybook config. The component i want to display in storybook has a *.component.scss file - when compiling i get the following error:

ERROR in ./src/app/modules/ka-basic-components/ka-button/ka-button.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '~styles/helpers/variables';
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
      in C:\__CODE__\Comet\FrontEnd\ClientApp\src\app\modules\ka-basic-components\ka-button\ka-button.component.scss (line 1, column 1)

From what I've researched, this indicates multiple scss loaders - however, when i remove the webpack config test for scss, i get the following error instead:

ERROR in ./src/app/modules/ka-basic-components/ka-button/ka-button.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '~styles/helpers/variables';
^
      File to import not found or unreadable: ~styles/helpers/variables.

Steps to reproduce

1. Create a new angular 6 cli project with scss style and storybook/angular
2. Create a component with a scss import statement in the scss stylesheet
3. Create a story using that component
4. yarn storybook

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

• @storybook/angular: 4.0.0-alpha.10

Affected platforms

• @angular/cli: 6.0.3

Screenshots / Screencast / Code Snippets (Optional)

Webpack.config.js

const path = require('path');

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

index.stories.ts

import { storiesOf } from '@storybook/angular';
import { KaButtonComponent } from '../app/modules/ka-basic-components/ka-button/ka-button.component';

storiesOf('Button', module).add('Primary', () => ({
    component: KaButtonComponent,
    props: {
        text: 'test'
    }
}));

[igor-dv]

First, you indeed do not need an extra loader, since storybook integrates with angular-cli.

File to import not found or unreadable: ~styles/helpers/variables.

means that the file you are importing can't be found. Try to add "styles" to the webpack's aliases in the .storybook/webpack.config.js

[skolldev]

Thanks for your help igor! That did indeed solve it. I will leave this here in case somebody stumbles upon this:

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            styles: path.resolve(__dirname, '../src/styles')
        }
    }
};

[dereklin]

@xDecus I am curious.

The solution you have given actually works if I import with ~.

However, when starting the app, @import '~...' doesn't work for me after I upgrade to angular 6.

Here is my repo: https://github.com/dereklin/nrwl-nx-workspace-demo/tree/integrate-storybook

Please note integrate-storybook is the branch.

In here i am trying @import '~...': https://github.com/dereklin/nrwl-nx-workspace-demo/blob/integrate-storybook/apps/app1/src/app/components/sparklines/sparklines.component.scss

When I start the app (npm run start:app1), I get:

ERROR in ./src/app/components/sparklines/sparklines.component.scss
Module build failed: 
@import '~styles/variables';
^
      File to import not found or unreadable: ~styles/variables.
      in /Users/delin/sandbox/nrwl-nx-workspace-demo/apps/app1/src/app/components/sparklines/sparklines.component.scss (line 1, column 1)

Did you have to do anything special to make importing with ~ work in angular 6?

The other thing is:

styles: path.resolve(__dirname, '../src/styles')

is somewhat static, when I have multiple apps but only one webpack config, I need to dynamically point styles to different folders depending who which app the component belongs to, so this resolver need to evaluate the matching folder at run time or need to take the parent folder into consideration. Not sure how this can be achieved...

[skolldev]

Hi @dereklin,

i just downloaded your project, yarn installed the dependencies and ran the storybook script. It started up flawlessly. Seems to be a faulty installation on your machine or something..

For your second question - your scss imports will mostly be helpers like placeholders, variables and mixins, right? Why do you need different folders for different components? If you do need that, just specify the full path of the import in your scss file and leave out the alias.

Cheers!

[dereklin]

@xDecus Did you do git checkout integrate-storybook after you did git clone? I am getting this when I do npm run start:app1:

ERROR in ./src/app/components/sparklines/sparklines.component.scss
Module build failed:
@import '~styles/variables';
^
      File to import not found or unreadable: ~styles/variables.
      in C:\Users\Derek\sandbox\nrwl\nrwl-nx-workspace-demo\apps\app1\src\app\components\sparklines\sparklines.component.scss (line 1, column 1)
i ｢wdm｣: Failed to compile.

And you can read about the referenced issue with angular-cli as well.

Thanks.

[igor-dv]

I think you should add the styles dir to the paths (not the includePaths) to make them "aliased" for the angular cli.

Anyway, I will check the "stylePreprocessorOptions.includePaths" options from the #3824. (I assume this is something specific to the node-sass)

[dereklin]

Got word from angular-cli team, fuzzy import like @import '~styles/variables' is not supported: https://github.com/angular/angular-cli/issues/11435#issuecomment-402230031

[AcehilmAbegrr]

Has anyone figured out a solution to this yet? I am having a similar issue: command: ng test error:

ERROR in ./src/app/components/user-login/user-login.component.scss
Module build failed:
@import "functions";
^
      File to import not found or unreadable: functions.

[igor-dv]

Try to define "functions" in the webpack's aliases (in .storybook/webpack.config.js ).

[AcehilmAbegrr]

Can you show me an example of how I might do that? I have 3 webpack.config.js files First webpack.config.js:

var path = require("path")

module.exports = {
    "entry": "./lib/index.js",
        "output": {
        "path": __dirname + "/build"
    ,   "filename": "xxhash.js"
    ,   "library": "XXH"
    ,   "libraryTarget": "umd"
    }
}

Second webpack.config.js file:

switch (process.env.NODE_ENV) {
  case 'prod':
  case 'production':
    module.exports = require('./config/webpack.prod')({env: 'production'});
    break;
  case 'test':
  case 'testing':
    module.exports = require('./config/webpack.test')({env: 'test'});
    break;
  case 'package':
    module.exports = require('./config/webpack.package')({env: 'package'});
    break;
  case 'dev':
  case 'development':
  default:
    module.exports = require('./config/webpack.dev')({env: 'development'});
}

3rd webpack.config.js file:

module.exports = {
    module: {
        rules: [
            {
                test: /\.pug$/,
                use: [
                    "pug-loader?self",
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
            }
        ]
    }
};

[igor-dv]

I am not sure what are those webpack.confgs are, but @xDecus shared his soultion in this comment ☝️ . You should add the alias to the webpack.config.js in .storybook dir.

[samyabh]

I was having almost same trouble as you: every scss import that I have did not worked.

Here are a solution that solved my problem :

const path = require("path");

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

I have just only added the loader sass-loader, just this one, no more. Be aware of the include path that will no be the same and it will not be required in your case.

[serkon]

Below code works for me on Angular "@angular/core": "^11.0.3"

@import "/src/config"; // without tilde, it import _config.scss file placed under the src folder.
@import "~@logo-software/theme/base"; // tilde looks for node_modules folder