使用 Bower 自定义 zurb foundation 6 的正确方法

Question

将 zurb foundation 6 与 bower 一起使用，使用 _settings.scss 文件自定义它的正常工作流程是什么，这样文件就不会留在 bower_components 文件夹中。

说我们可以复制设置文件，然后将其导入我们的 app.scss.

在我的自定义 scss 文件夹中，我使用 _settings 文件作为模板创建了一个 settings.scss 文件，但在这种情况下，我还必须复制整个 utils 文件夹，因为设置文件会导入它。（或将 utils 文件夹的导入路径更改为 bower_components).

中的路径

有更好的方法吗？？

编辑

我正在使用 gulp 编译 sass 个文件。

gulp.task('sass', () => {

    gulp.src('./app/sass/app.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./app'))

})

这就是 app.scss 现在的样子（foundation.scss 是一个从 bower_components 中导入 scss 文件的文件，而 settings 是 _settings 文件的克隆有一些变化）

@import 'settings';
@import 'foundation';

@include foundation-global-styles;
// @include foundation-grid;
@include foundation-flex-grid;
// @include foundation-typography;

Answer 1

您肯定想从 bower_components 目录中复制设置文件。然后，您应该将 bower_components/foundation-sites/scss 添加到编译 SCSS 的导入路径中，这将解决 utils 问题。导入路径需要位于 gulp-sass 管道内的选项对象中，如下所示：

gulp.task('sass', () => {

    gulp.src('./app/sass/app.scss')
    .pipe(sass({
        includePaths: ['bower_components/foundation-sites/scss']
    }).on('error', sass.logError))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./app'))
})

当您使用 includePaths 选项时，导入将检查与当前目录相关的文件，然后是与 includePaths 数组中的目录相关的文件。 @import util/util 在将 bower_components/foundation-sites/scss 添加到 includePaths 之后起作用，因为完整路径是 bower_components/foundation-sites/scss/util/_util.scss.

Answer 2

更简单：

将默认 bower_components/foundation-sites/scss/settings/_settings.scss 文件移动到您自己的项目样式中。
根据自己的喜好编辑 _settings.scss 文件。
转到 bower_components/foundation-sites/scss/foundation.scss 文件：

替换：

// Settings
// import your own `settings` here or
// import and modify the default settings through
// @import 'settings';

有：

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'your_own/project/styles/path/settings';

确保在您的样式中导入基础：

@import "bower_components/foundation-sites/scss/foundation.scss";

瞧！

使用 Bower 自定义 zurb foundation 6 的正确方法

Correct Way to customize zurb foundation 6 with bower

zurb-foundation

zurb-foundation-6