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是如何工作的，但它正在观看基础源代码吗？也许基础工具与 gulp 之间存在冲突。我的意思是，可能是基础正在编译，然后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']);

基本上我建议用凉亭下载基础scss，并将其包含在gulp中。

Foundation 6 CSS不起作用

1 个答案: