tsconfig paths not respected for styles

[nnixaa]

So the issue is that the paths setting from the tsconfig.app.json is not respected for style files imports since the cli 1.3.0.

My setup is that I have a module inside of my project, aliased in tsconfig.app.json using:

    ...

    "paths": {
      "@core/*": [
        "./core/*"
      ]
    }

The module consists of various ts and scss files.

The files are imported as:
import { SomeClass } from '@core/module/file';

and for styles as:
@import '~@core/module/styles'; // this fails since 1.3.0

Since angular-cli@1.3.0 the styles import of this kind is not working.

Simple reproducible example:

nnixaa/cli-scss-alias-issue@40c33c8

Versions

tested and reproducible on cli 1.3.0, 1.6.2, 1.6.3
tested and works fine on cli 1.2.6, 1.2.7

Repro steps

• clone the project https://github.com/nnixaa/cli-scss-alias-issue
• run npm start

Observed behavior

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
@import '~@core/module/styles'; // this fails since 1.3.0
^
      File to import not found or unreadable: ~@core/module/styles.
Parent style sheet: stdin
      in /Users/nixa/Development/Sandbox/scss-alias-tsconfig/src/styles.scss (line 2, column 1)
Error:
@import '~@core/module/styles'; // this fails since 1.3.0
^
      File to import not found or unreadable: ~@core/module/styles.
Parent style sheet: stdin
      in /Users/nixa/Development/Sandbox/scss-alias-tsconfig/src/styles.scss (line 2, column 1)
    at options.error (/Users/nixa/Development/Sandbox/scss-alias-tsconfig/node_modules/node-sass/lib/index.js:291:26)
 @ ./src/styles.scss 4:14-191
 @ multi ./src/styles.scss

Desired behavior

Should import styles correctly as per configured paths setting.

Possibly related

#8117 (workaround used there fixes the issue)
#8036

[PsyGik]

Any updates/fixes/workaround on this?

[iwantwin]

Any updates on this?

[radonirinamaminiaina]

Same problem

[lazysergey]

still valid issue. workaround for this is to add this entry in .angular-cli.json

    {
        "apps": [{
            ...
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }]
    }

[btkfrank]

still valid issue. workaround for this is to add this entry in .angular-cli.json

    {
        "apps": [{
            ...
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }]
    }

Do you know if there is a way to make VS Code go to definition(ctrl/cmd + click) still works?
This can fix the build issue, but I am missing go to definition

[eestein]

Any news on this? The workaround does not work for me.

My tsconfig:

"paths": {
    "@projx/components": [
        "projects/projx/components/src/public_api"
    ],
    "@projx/components/*": [
        "projects/projx/components/*"
    ],
    "~@projx/components/themes/default": [
        "projects/projx/components/src/lib/styles/themes/default.scss"
    ]
}

Inside my local SCSS file:

@import '~@projx/components/themes/default';

Still, it doesn't work for the styles, only for the TS files.

[alan-agius4]

Closing as this is working as intended. TypeScript config paths are meant to work solely for TypeScript.

As suggested above you can use includePaths to shorten your SCSS import.