Angular 5 + Bootstrap 4自定义主题编译失败求助

看起来你在搭建自定义主题时遇到了编译报错，我帮你拆解下问题根源，再给出可行的解决办法：

问题分析 #

1. 语法错误：你在header.component.scss里写了$theme("bg-title")，这里多了个$符号——正确的函数调用应该是theme("bg-title")。
2. 作用域问题：Angular组件的SCSS文件默认是局部作用域，没办法直接访问全局style.scss里定义的Sass变量和函数，这是导致编译失败的核心原因。

解决方案 #

第一步：修正语法错误

先把header.component.scss里的错误调用改过来：

// src/app/header/header.component.scss
* { background: theme("bg-title"); }

第二步：让组件能访问全局Sass资源

这里有两种常用方法，你可以根据项目情况选择：

方法1：手动在组件中导入全局样式文件

直接在组件SCSS里引入style.scss，确保路径正确：

// src/app/header/header.component.scss
@import "../../style.scss"; // 路径根据你的项目结构调整，能找到style.scss就行

* { background: theme("bg-title"); }

方法2：配置全局自动导入（更推荐）

如果不想每个组件都手动导入全局样式，可以通过Angular的配置文件设置全局预处理器路径，让所有组件都能直接访问全局变量/函数：

1. 打开Angular 5的配置文件.angular-cli.json（Angular 6+是angular.json）
2. 在apps数组里找到你的项目配置，添加stylePreprocessorOptions：

{
  "apps": [
    {
      // ...其他已有配置
      "stylePreprocessorOptions": {
        "includePaths": [
          "src" // 把src目录加入预处理器的搜索路径
        ]
      },
      "styles": [
        "style.scss"
      ]
    }
  ]
}

3. 建议把主题变量和函数单独抽成_variables.scss文件（比如放在src/_variables.scss），这样更便于维护：

// src/_variables.scss
@function theme($key: "primary") { @return map-get($theme-colors, $key); }
$theme-colors: (
  "bg": #888,
  "bg-title": #555,
  "danger": #ff4136
);

4. 然后在style.scss里导入这个变量文件：

// src/style.scss
@import "_variables.scss";
* { background: theme("bg"); }

5. 最后在组件里直接导入变量文件即可：

// src/app/header/header.component.scss
@import "_variables.scss";

* { background: theme("bg-title"); }

额外小贴士 #

如果你的项目用到了Bootstrap的默认组件，建议先导入Bootstrap的变量文件再覆盖$theme-colors，避免样式冲突，比如：

// src/_variables.scss
@import "~bootstrap/scss/_variables"; // 先导入Bootstrap默认变量
@function theme($key: "primary") { @return map-get($theme-colors, $key); }
// 覆盖自定义的主题色
$theme-colors: (
  "bg": #888,
  "bg-title": #555,
  "danger": #ff4136
);

内容的提问来源于stack exchange，提问作者NeS