Exported scss variables are undefined in typescript

[marek-aguita]

🐞 Bug report

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

I'm trying to reuse scss variables also in typescript code of the components, but they don't get imported as I'd expect.
Following some tutorials it should be able this way:

• in styles.scss:

$color: "red";

:export { color: $color; }

• in styles.scss.d.ts:

export interface Styles { color: string; }

export const styles: Styles;

export default styles;

• in app.component.ts:

import styles from "../styles.scss";

When I log styles.color, it should say 'red', but it's undefined. However, logging the whole styles variable logs the whole scss :export rule in a form of a string: :export{color:"red"}

🔬 Minimal Reproduction

Open StackBlitz and read what console says.

🌍 Your Environment

Angular CLI: 11.0.4
Node: 12.18.3
OS: win32 x64

Angular: 11.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1002.0
@angular-devkit/build-angular      0.1100.4
@angular-devkit/core               10.2.0
@angular-devkit/schematics         11.0.4
@angular/cdk                       11.0.2
@angular/flex-layout               11.0.0-beta.33
@angular/material                  11.0.2
@angular/material-moment-adapter   11.0.2
@schematics/angular                11.0.4
@schematics/update                 0.1100.4
ng-packagr                         11.0.3
rxjs                               6.6.3
typescript                         4.0.5

(The environment is slightly different than the one in StackBlitz I've provided, but the behavior is the same in both my real project and there.

[alan-agius4]

Hi,

Importing a .scss file in TypeScript is non standard and this heavily relies on the underlying build system in this case Webpack.

While the Angular CLI does use Webpack it is an implementation detail and Webpack specific features and not support and might break without warning.

Hence, while this might have worked or might still work it is not a feature which is supported by the Angular tooling team, and we recommand not to rely on Webpack specific features.

Thanks.

[chrissyast]

Good job Angular protected us from something breaking without warning by making something break without warning 👍

[angular-automatic-lock-bot]

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.}