Timber WordPress项目中Gulp配置Sass结合Tailwind的实现问题

• 重命名原src/css/style.css为src/css/style.scss
• 可新增src/css/partials目录存放拆分的SCSS模块（如_buttons.scss、_typography.scss等），实现多文件扩展样式
• 修改style.scss内容，按需引入自定义SCSS模块，示例如下：

@tailwind base;
@tailwind components;

/* 引入自定义SCSS模块，可根据需求新增多个 */
@import './partials/_buttons.scss';
@import './partials/_typography.scss';

@tailwind utilities;

你可以在自定义SCSS文件中正常使用嵌套、变量、混合宏等原生SCSS特性，也可以配合Tailwind的@apply、@layer指令扩展样式能力。

仅需要调整三个位置即可适配SCSS编译：

1. 调整CSS入口文件路径为SCSS文件
2. 在PostCSS处理前新增SASS编译节点
3. 修改监听规则匹配所有SCSS文件
   修改后的完整配置如下：

const gulp = require('gulp')
// 如果gulp-sass为v5及以上版本，需要提前执行npm i sass -D安装依赖，按下面写法绑定编译器；低版本可直接写const sass = require('gulp-sass')
const sass = require('gulp-sass')(require('sass')); 
const postcss = require('gulp-postcss')
const stripCssComments = require('gulp-strip-css-comments')
const cleanCSS = require('gulp-clean-css')
const livereload = require('gulp-livereload');

// WP write header and footer
const fs = require('fs')
const header = require('gulp-header')
const footer = require('gulp-footer')

// Package.JSON contents
const pkg = JSON.parse(fs.readFileSync('./package.json'))

function css() {
  const cssbanner = [
    '/*',
    'Theme Name:          ' + pkg.themename,
    'Description:         ' + pkg.description,
    'Author:              ' + pkg.author,
    'Author URI:          ' + pkg.authoruri,
    'Version:             ' + pkg.version,
    'Theme URI:           ' + pkg.homepage,
    'License:             ' + pkg.license,
    'License URI:         ' + pkg.licenseuri,
    'Text Domain:         ' + pkg.textDomain,
    '*/',
    ''
  ].join('\n')

  return gulp
    .src('src/css/style.scss') // 改入口为scss文件
    .pipe(sass().on('error', sass.logError)) // 新增sass编译步骤，带错误日志输出避免进程崩溃
    .pipe(
      postcss([
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer')
      ])
    )
    .pipe(livereload())
    .pipe(stripCssComments({ preserve: false }))
    .pipe(cleanCSS(require('./configs/clean-css.js')))
    .pipe(
      header(cssbanner, {
        pkg: pkg
      })
    )
    .pipe(footer('\n'))
    .on('error', console.error.bind(console))
    .pipe(gulp.dest('./'))
}

// default watch function
exports.default = function() {
livereload.listen();
  gulp.watch(
    ['./**/*.twig','tailwind.config.js','./**/*.php', './src/css/**/*.scss'], // 改监听规则匹配所有层级的scss文件
    gulp.series(css)
  )
}

启动gulp监听服务后，修改任意SCSS文件或模板文件，确认根目录生成的style.css包含自定义样式和Tailwind样式，WordPress后台主题识别正常，前端样式加载无问题即可。

内容的提问来源于stack exchange，提问作者Michael Story