Question

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

This answer说我们可以复制设置文件，然后将其导入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";

瞧！

正确的方法来定制zurb基础6与凉亭

2 个答案: