0

将 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;
4

2 回答 2

3

您肯定想将设置文件复制到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.

于 2016-02-17T20:27:14.513 回答
1

更轻松：

  1. 将默认bower_components/foundation-sites/scss/settings/_settings.scss文件移动到您自己的项目样式中。
  2. _settings.scss根据自己的喜好编辑文件。
  3. 转到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';
  1. 确保在您的样式中导入基础：

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

  1. 瞧！
于 2017-04-30T19:06:24.610 回答