Gulp Watch监听时跨文件引用CSS $变量报错求助

你遇到的这个问题，核心原因是postcss-simple-vars本身不会自动处理CSS的@import依赖——当你把变量单独放在一个文件并导入主CSS时，PostCSS在解析变量的阶段，还没把导入的变量文件内容合并进来，自然就找不到变量定义，报出"Undefined variable"错误。

下面是具体的解决方案，亲测有效：

核心思路：用postcss-import处理文件导入 #

postcss-import插件的作用就是解析CSS中的@import语句，把导入的文件内容直接合并到主文件中，这样postcss-simple-vars在解析变量时，就能提前读取到跨文件定义的变量了。

步骤1：安装postcss-import #

在项目根目录执行安装命令：

npm install postcss-import --save-dev

步骤2：调整Gulp任务的插件顺序 #

在你的PostCSS插件数组中，必须把postcss-import放在postcss-simple-vars前面——插件执行顺序至关重要，必须先合并所有导入的文件，再解析变量。

示例Gulp任务代码参考：

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const postcssImport = require('postcss-import');
const simpleVars = require('postcss-simple-vars');

// 处理样式的核心任务
gulp.task('styles', function() {
  // 注意：gulp.src要指向你的主CSS文件（也就是导入变量文件的那个入口文件）
  return gulp.src('./app/assets/styles/main.css')
    .pipe(postcss([
      postcssImport(), // 第一步：处理@import，合并所有依赖的CSS文件
      simpleVars()     // 第二步：解析变量，此时变量定义已经在合并后的文件里了
    ]))
    .pipe(gulp.dest('./dist/styles'));
});

// Watch监听任务
gulp.task('watch', function() {
  // 监听所有CSS文件的变化，触发styles任务重新编译
  gulp.watch('./app/assets/styles/**/*.css', gulp.series('styles'));
});

步骤3：确认@import路径正确 #

确保主CSS文件中的导入语句路径准确，比如你的变量文件是modules/_variables.css，主文件里应该写：

@import './modules/_variables.css';

路径是相对于主CSS文件的位置，不要写错层级。

额外注意事项 #

• 插件顺序绝对不能搞反：如果先运行simpleVars再运行postcss-import，变量解析时导入的文件还没合并，依然会报错。
• 不要让gulp.src直接指向变量文件：应该始终以主CSS文件为入口，这样所有依赖的导入文件都会被postcss-import正确处理。
• 如果还有其他PostCSS插件（比如autoprefixer），建议遵循postcss-import → simpleVars → 其他插件的顺序。

这样调整后，当你保存CSS文件时，gulp watch会重新编译主文件，postcss-import先把变量文件合并进来，postcss-simple-vars就能正确识别跨文件定义的变量了。

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