Vue.js v3 加载 Zurb Foundation 6 SCSS 变量未定义问题咨询

依赖安装检查 #

首先确保已安装所有必需的构建依赖，执行安装命令：
npm i style-resources-loader vue-cli-plugin-style-resources-loader sass sass-loader -D
如果安装后出现兼容性报错，可将sass-loader降级到适配Node15的10.x版本：
npm i sass-loader@10 -D

修正vue.config.js配置 #

你原有根目录vue.config.js的路径配置错误，__dirname指向项目根目录，无需向上跳转层级，同时Foundation的SCSS源码存放在scss目录而非dist目录，修正后配置如下：

const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [path.resolve(__dirname, 'node_modules/foundation-sites/scss/foundation.scss')]
    }
  }
}

配置修改完成后必须重启开发服务，否则新配置不会生效，这也是你之前写错路径都没有报错提示的核心原因。

清理无效配置 #

你写在App.vue组件导出对象中的pluginOptions配置完全无效，该配置属于vue-cli的webpack扩展配置项，不是Vue组件支持的配置属性，直接删除这段内容即可。
同时你在script标签中直接import SCSS文件的写法也无法注入全局SCSS变量，直接删除相关import语句。

功能验证 #

如果全局注入仍然不生效，可以先在App.vue的style标签中直接导入测试可用性：

<style lang="scss">
@import 'foundation-sites/scss/foundation';
/* 测试变量是否正常识别 */
.test-border {
  border: 1px solid $medium-gray;
}
</style>

如果测试正常，再检查全局注入的路径、服务重启状态即可。

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