Angular：模块解析失败：意外的标记（1：0）导入 scss 变量

Question

在我们的项目中，我们有一个调色板，用于在项目中导入样式。它在 Angular 13 中可以工作，但是到 Angular 14 后就不再工作了。这是它的详细信息。

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";

在调色板.scss 中，这就是它所尖叫的内容：

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

我们有一个支持打字稿文件 Palette.scss.ts，可以通过这种方式导出它：

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

let palette;
export default palette;

它也被添加到我们的 angular.json 架构师部分，如下所示：

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

然后，只要我们在组件中导入调色板，我们就可以像这样使用它：

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);

对于我们应该改变什么有什么想法吗？以下是有关重大更改的一些详细信息（如果有帮助的话）。 https://github.com/angular/angular-cli/issues/23273

我觉得这可能只是一个配置问题，但我还没有找到任何有效的东西。

Answer 1

刚刚发现这不再可能了。他们删除了该功能。 https://github.com/angular/angular-cli/issues/19622。即将结束。