Question

我正在建立我的第一个基金会网站。我通过npm安装了基础。我认为单独留下基础样式然后覆盖需要调整的内容是一种很好的做法。基础样式将在sass编译作业（使用gulp或其他）作为外部包含时包含在内。这是正确的方法吗？

标准基础安装（对于站点）具有许多我可能不需要的功能。我担心臃肿的CSS。我怎么把它们扔掉？

所以核心问题是 - 是否可以搞乱基础资源？

Answer 1

请不要更改核心文件，当您将基础更新到新版本时，您将失去更改。

使用sass版本的基础6，您可以选择在CSS中输出的内容。例如，当使用基础cli时，您有一个app.scss文件，其中包含所有功能。您可以简单地评论项目中不需要的功能。

当您对某个功能发表评论时，您仍然可以包含带有scss混音的样式。

App.scss

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
// @include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
// @include foundation-progress-element;
// @include foundation-meter-element;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
// @include foundation-flex-classes;

@include motion-ui-transitions;
@include motion-ui-animations;

Answer 2

编辑核心文件 不 良好做法，因此最好创建自定义样式表并将其包含在基础CSS下面。

向基础添加自定义样式

2 个答案: