css - Foundation 6 CSS 不工作

Question

我刚刚通过以下方式安装了 Foundation 6:

foundation new

我选择了 Foundation for Sites。文件结构已创建，一切正常。

然后我跑

foundation watch

一切看起来都很好。 gulp 运行并观察变化。

然后我创建了 _custom.scss 并将其导入到 app.scss 中:

@import 'custom';

我什至将命令放在文件末尾，看看这是否有任何改变。

我在自定义文件中写了一些 css，然后保存。

我可以看到在 scss/app.scss 文件中创建的自定义 CSS，但自定义 CSS 没有出现。

即使我更改了 _settings.scss 中的参数，如

$body-background: $black;

没有效果。

以上所有变化都体现在

foundation watch

虽然是终端窗口。我可以看到 sass 编译器更新没有错误。 谢谢

Answer 1

也许是缓存，你应该检查一下。我不知道 foundation new 是如何工作的，但它正在监视 foundation 源代码，对吧？ foundation 工具和 gulp 之间可能存在冲突。我的意思是也许 foundations 正在编译，然后 gulp 在没有你的文件的情况下重新编译。

我建议你检查一下:

• 也许基金会或 gulp-cache 或其他插件提供了一些缓存
• 可能会进行某种重写，所以也要检查一下
• 确保您的文件没有错误，否则将无法进行更改
• 您的自定义文件应该最后包含，这样它就可以覆盖其他类

如果这没有帮助，请尝试使用 gulp 和 bower 的不同方法。对您的 gulpfile 进行以下更改:

var gulp = require('gulp'),
    ...,
    connect = require('gulp-connect'),
    sass = require('gulp-sass');

var paths = {
    css: [
        'bower_components/foundation-6/css/foundation.min.css',
        'src/sass/*.scss',
        'src/sass/**/*.scss'
    ],
    ...
}

gulp.task('connect', function() {
    connect.server({
        root:       'dist',
        livereload: true,
        host:       '0.0.0.0',
        port:       '8080'
    });
});

gulp.task('css', function() {
    gulp.src(paths.css)
    .pipe(sass())
    ...
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload());
});

gulp.task('watch', function() {
    gulp.watch(paths.css,   ['css']);
});

gulp.task('default', ['connect', 'css', 'watch']);

基本上我建议使用 bower 下载 foundation scss，并将其包含在 gulp 中。