Angular: Module parse failed: Unexpected token (1:0) importing scss variables

Question

In our project we had a palette that we used to import styles across our project. It worked in Angular 13, but after going to Angular 14 it doesn't work anymore. Here are the details on it.

Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> :export {
|   -mainBlue-: "#4285EB";
|   -delete-: "#ff3f3f";

In the palette.scss this is what it's screaming about:

:export {
  -mainBlue-: "#{$main-blue}";
  -delete-: "#{$delete}";
  -orange-: "#{$orange}";
  -white-: "#{$white}";
  -error-: "#{$error}";
}

We have a backing typescript file palette.scss.ts that exports it this way:

export interface Palette {
  mainBlue: string,
  delete: string,
  orange: string,
  white: string,
  error: string,
}

let palette;
export default palette;

It's also added to our angular.json architect section like so:

"styles": [
  "src/styles/styles.scss",
  "src/styles/palette.scss",
]

And then from there anytime we import palette in a component we could use it like so:

let stringifiedPalette: string = palette
  .replace(/(:export|\n|\s)/g,'')
  .replace(/;/g,',')
  .replace(/-/g,'"');
const lastCommaIndex = stringifiedPalette.lastIndexOf(',');
stringifiedPalette = stringifiedPalette.slice(0, lastCommaIndex) + stringifiedPalette.slice(lastCommaIndex + 1);
this.colorPalette = JSON.parse(stringifiedPalette);

Any thoughts on what we should change here? Here are some details on the breaking change as well if it helps. https://github.com/angular/angular-cli/issues/23273

I feel like it's just a config issue potentially, but I haven't been able to find anything that works.

Answer 1

Just found out this is no longer possible. They removed the feature:

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.

https://github.com/angular/angular-cli/issues/19622