如何在 WordPress 中更新 css 主题文件

Question

我对在哪里编辑 WordPress 主题感到困惑。我是 WordPress 的新手，并且有一个自定义主题，其中主要的 style.css 文件只是导入了这个主题的样式，如下所示：

@import url('assets/stylesheets/app.css');

我读到建议制作一个新的子主题，但我认为在我的情况下不需要这样做，因为我想几乎完全改变主题的 css，所以没有必要保留原始主题文件。因为，我试图修改文件'assets/stylesheets/app.css' 我在浏览器中看不到任何变化。我可以在那里编辑样式，或者我需要在某处的WP admin dashboard 中进行编辑吗？ 我想用 gulp 构建我的脚本，我是这样设置的：

var gulp          = require('gulp');
var sass          = require('gulp-sass');
var include       = require('gulp-include');
var watch         = require('gulp-watch');
var batch         = require('gulp-batch');
var sourcemaps    = require('gulp-sourcemaps');
var prefix        = require('gulp-autoprefixer');
var connect       = require('gulp-connect');
var browserify    = require('gulp-browserify');
var livereload    = require('gulp-livereload');
var browsersync   = require('browser-sync');

var config = {
  srcDir: './assets',
  styles: {
    src: '/scss/app.scss',
    dest: '/stylesheets',
    includePaths: [
      'node_modules/foundation-sites/scss'
    ],
    prefix: ["last 2 versions", "> 1%", "ie 9"]
  },
  scripts: {
    src: '/js/app.js',
    dest: '/js'
  },
  img: {
    src: '/images/**/*',
    dest: '/images'
  }
};

var srcDir = './src',
    destDir = './build';

gulp.task('styles', function() {
  return gulp.src(config.srcDir + config.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: config.styles.includePaths,
      sourceMap: true,
      outFile: config.srcDir + config.styles.dest + '/app.css',
      outputStyle: 'compressed'
    }))
    .pipe(prefix(config.styles.prefix))
    .pipe(sourcemaps.write())
    .on('error', sass.logError)
    .pipe(gulp.dest(config.srcDir + config.styles.dest))
    .pipe(browsersync.reload({ stream: true }));
});

gulp.task('scripts', function() {
  gulp.src(config.srcDir + config.scripts.src)
      .pipe(browserify({
        insertGlobals : true,
        debug : !gulp.env.production
      }))
      .pipe(gulp.dest(config.srcDir + config.scripts.dest))
});

gulp.task('include', function() {
  return gulp.src(config.srcDir + config.img.src)
    .pipe(gulp.dest(config.srcDir + config.img.dest));
});

gulp.task('watch', function () {
    // Watch .scss files
    gulp.watch(config.srcDir + config.styles.src, ['styles']);

    // Watch .js files
    gulp.watch(config.srcDir + config.scripts.src, ['scripts']);
});

gulp.task('default', ['styles', 'scripts', 'watch']);

所以，不知道如何使用 gulp 来做到这一点。我在哪里可以更改主题而不创建子主题？

Answer 1

“app.css”的导入发生在哪里——在“style.css”文件的开头还是结尾？如果在开头，“app.css”中更改的规则可能会被以下“style.css”规则覆盖。