angularjs - Foundation 6/Bootstrap 4 - 在 webpack 中使用 sass 设置文件的正确方法

Question

使用的项目:https://github.com/preboot/angular2-webpack

Foundation 6 带有一个全局 settings.scss 文件来自定义外观。我想知道将其加载到我的项目中的正确方法是什么。

我通过 NPM 安装了 foundation-sites 并将以下行添加到我的 vendor.ts

import 'foundation-sites';

在 src/style 我有以下两个文件 - 应用程序.scss - _settings.scss

在 app.scss 中我有以下代码

@import 'settings';
@import '~foundation-sites/scss/foundation';

body {
    background: $primary-color;
}

这很好用。当我更改 settings.scss 中的 $primary-color var 时，我看到了所需的结果。到目前为止，还不错。

现在我想在我的 app.component 中添加一个按钮样式。所以在 app.component.scss 中我首先做了以下事情。

button {
  @include button;
}

那是行不通的，缺少按钮 mixin。所以我在文件中添加了对基础的引用。

@import '~foundation-sites/scss/foundation';

button {
  @include button;
}

这有效，只是它从基础渲染默认按钮样式并且它不尊重我在 settings.scss 中所做的覆盖。所以我添加了对设置文件的引用:

@import '~src/style/settings';
@import '~foundation-sites/scss/foundation';

button {
  @include button;
}

它又开始工作了。在每个组件上进行这两个导入感觉有点麻烦。有更好的方法吗？

Answer 1

这是我组织代码的方式，不需要添加额外的@import

应用程序.scss

@import './foundation';
@import './componentA';
...

基础.scss:

@import './settings/settings';
@import '~foundation-sites/scss/foundation';
@include foundation-everything;

componentA.scss

a {
  @include button;
}

我只是@import 'application'，我不需要在每个组件中重新导入基础。