使用browserify/vueify注入全局SCSS至Vue组件遇变量未定义错误

你的问题出在对vueify的Sass配置理解有误：includePaths只是告诉Sass编译器去哪里查找@import的文件路径，并不会自动把你的main.scss内容注入到每个Vue组件的样式中。所以当你在App.vue的scoped样式里用$backgroundColor时，编译器根本不知道这个变量的定义——因为组件的样式代码里没有显式导入对应的SCSS文件。

正确的配置修改方式 #

你需要在vueify的Sass配置中添加data选项（如果使用新版dart-sass则是additionalData，但vueify配合browserify通常用node-sass，data即可），让编译器自动在每个组件的SCSS代码前注入全局SCSS文件的导入语句。

修改后的gulp配置如下：

// gulp.js
gulp.task("build_js", () => {
  return browserify({ entries: config.app.index, cache: {}, dev: true })
  // [...]
  .transform(vueify, {
    sass: {
      includePaths: ["public/app/styles"], // 只需要指定目录，不用加具体文件
      data: '@import "main.scss";' // 关键：自动给每个组件注入全局SCSS
    }
  })
  // [...]
});

配置说明 #

1. includePaths调整：只保留public/app/styles目录即可，这样Sass能找到main.scss以及它内部@import的所有子文件（比如helpers/mixins）。
2. data选项作用：这个配置会在每个Vue组件的<style lang="scss">代码最顶部自动添加@import "main.scss";，相当于每个组件都隐式导入了全局SCSS，自然就能访问到里面的变量、混合宏和颜色定义了。

优化建议（可选） #

如果你的main.scss里包含全局样式（比如reset、typography这类全局生效的代码），直接注入到每个scoped样式里会导致代码重复。建议把变量、混合宏单独抽离成一个专门的全局辅助文件：

1. 新建public/app/styles/helpers/global-helpers.scss，内容只保留变量、混合宏、颜色定义：

// global-helpers.scss
@import "mixins";
@import "variables";
@import "colors";

2. 修改main.scss，导入这个辅助文件+其他全局样式：

// main.scss
@import "helpers/global-helpers";
// Base
@import "base/reset";
@import "base/typography";
@import "base/base";
// Layout
@import "base/layout";

3. gulp配置里的data改为导入这个辅助文件：

data: '@import "helpers/global-helpers.scss";'

这样既能让组件拿到全局变量，又不会重复注入全局样式，更合理。

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