访问角度2组件中的bootstrap scss变量

Question

我正在开发一个使用Angular CLI构建的新Angular2项目,并将项目配置为使用SCSS.我已将Bootstrap 4成功加载到我的styles.scss文件中,但是如果我尝试访问任何Bootstrap(或者我自己styles.scss在组件中定义的变量,则会Undefined Variable出现构建错误.

组件的样式文件是在styles节点的主条目之前编译的angular-cli.json吗？我怎样才能使在该全局级别定义的任何变量可用于应用程序中的所有组件？谢谢!

角cli.json

"apps": [
  {
    ...
    "styles": [
      "styles/styles.scss"
    ],
    ...
  }
]

styles.scss

// Bootstrap
$enable-flex: true; // Enable Flexbox mode
@import "../../node_modules/bootstrap/scss/bootstrap";

零件

.navbar {
  background: $brand-primary; // Undefined variable here
}

Answer 1

仅仅因为您将引导程序4导入到您的styles.scss中并不意味着您.scss的组件上的文件可以访问它.

在component.scss你必须导入Bootstrap变量:

@import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary; // No more Undefined variable here
}

说明

很多人似乎对此感到困惑,你不应该导入bootstrap.scss你的组件,你应该只导入你需要的东西.

如果仔细查看bootstrap.scss的源代码,它们会将所有内容分隔在不同的文件中.你有mixins文件夹和_variables.scss文件.这些应该是您在组件上导入的唯一内容,以避免CSS重复.

这会增加我的包大小,在每个组件上导入这些东西吗？

不,它不会.为什么？mixins并且variables是特定的(至少目前为止)所以当您将所有变量导入到组件中时,如下所示:

@import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary;
}

它的输出CSS将是:

.navbar {
  background: #007bff;
}

编译到CSS后,其余变量将被丢弃.

Answer 2

创建一个 _colors.scss 文件，复制里面的所有颜色变量并将该文件导入到你的 component.scss 文件中。