tsconfig paths not respected for styles

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

Any updates/fixes/workaround on this?

Any updates on this?

Same problem

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

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

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

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.

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.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

tsconfig paths not respected for styles #9018

Versions

Repro steps

Observed behavior

Desired behavior

Possibly related

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

tsconfig paths not respected for styles #9018

Description

Versions

Repro steps

Observed behavior

Desired behavior

Possibly related

Activity

PsyGik commented on Apr 17, 2018

iwantwin commented on May 30, 2018

radonirinamaminiaina commented on Jul 28, 2018

lazysergey commented on Aug 27, 2018

btkfrank commented on Feb 6, 2019

eestein commented on Oct 1, 2019

alan-agius4 commented on May 26, 2020

angular-automatic-lock-bot commented on Jun 27, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions