基础 6 CSS 不工作答案

【问题标题】：Foundation 6 CSS not working基础 6 CSS 不工作
【发布时间】：2016-10-18 01:34:49
【问题描述】：

我刚刚通过以下方式安装了 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 编译器没有错误地更新。谢谢

【问题讨论】：

检查您的文件是否有任何错误，如果有任何错误，您保存的更改将不会反映

标签： css zurb-foundation

【解决方案1】：

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

我建议你检查一下：

可能有一些缓存是由 Foundation 或 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 下载基础 scss，并将其包含在 gulp 中。

【讨论】：