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

Posted 2023-02-19

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

【英文标题】：Foundation 6 / Bootstrap 4 - Correct way to use sass setting file in webpack

【发布时间】：2016-11-19 17:40:21

【问题描述】：

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

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

我通过 NPM 安装了基础站点，并将以下行添加到我的 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;

这不起作用，缺少按钮混合。所以我在文件中添加了对基础的引用。

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

button 
  @include button;

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

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

button 
  @include button;

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

【问题讨论】：

你们每个人都能解决这个问题吗？我试图用 vue.js 和 webpack 做类似的事情。

很遗憾，没有。下周我有时间更多地研究这个问题。随时通知您。

尝试在第一个设置文件的最后一行添加按钮 mixin。

【参考方案1】：

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

应用程序.scss

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

foundation.scss：

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

组件A.scss

a 
  @include button;

我只是 @import 'application' 并且我不必在每个组件中重新导入基础。