JEKYLL SASS CSS

Question

您好，我有一个网站设置。但是我无法让 jekyll 将我在 sass 文件中所做的实际更改编译为每篇文章的 css 文件。

我必须在我的 gulp 文件中添加一些东西吗？我以为 jekyll 会自动将 sass 样式编译成 css 而无需将其实现到 gulp 中？还是 package.json？

我让 sass 工作并使用 gulp 命令编译网站布局 css 文件夹，但是文章部分和帖子，当我更改每篇文章的 sass 样式文件时没有任何反应，我必须直接编辑实际的 css 文件看到变化。

我在这里遗漏了一些东西是我的代码

{
  "name": "browser-sync-jekyll",
  "version": "0.0.0",
  "description": "A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Shane Osbourne",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.8.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-jade": "^1.0.1",
    "gulp-sass": "^2.0.4"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync.git"
  },
  "keywords": [
    "jekyll",
    "gulp",
    "sass",
    "browsersync"
  ],
  "bugs": {
    "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/issues"
  },
  "homepage": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync"
}



var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var cp          = require('child_process');
var jade        = require('gulp-jade');

var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};




/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
        .on('close', done);
});




/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});




/**
 * Wait for jekyll-build, then launch the Server
 */
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
    browserSync({
        server: {
            baseDir: '_site'
        },
        notify: false
    });
});




/**
 * Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
 */
gulp.task('sass', function () {
    return gulp.src('assets/css/main.scss')
        .pipe(sass({
            includePaths: ['css'],
            onError: browserSync.notify
        }))
        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('_site/assets/css'))
        .pipe(browserSync.reload({stream:true}))
        .pipe(gulp.dest('assets/css'));
});


gulp.task('jade', function(){
  return gulp.src('_jadefiles/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('_includes'));
});


/**
 * Watch scss files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
    gulp.watch('assets/css/**', ['sass']);
    gulp.watch('assets/js/**', ['jekyll-rebuild']);
    gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
    gulp.watch(['assets/js/**'], ['jekyll-rebuild']);
    gulp.watch('_jadefiles/*.jade', ['jade']);
});




/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync & watch files.
 */
gulp.task('default', ['browser-sync', 'watch']);

Answer 1

尝试Jekyll clean命令，让所有文件都可以重新生成，确保增量关闭。