“ModuleBuildError: Undefined variable: "$base-spacing" 尝试在 Jenkins 服务器上构建 Vue cli-3 应用程序时答案

【问题标题】：“ModuleBuildError: Undefined variable: "$base-spacing" when attempting to build Vue cli-3 app on Jenkins Server“ModuleBuildError: Undefined variable: "$base-spacing" 尝试在 Jenkins 服务器上构建 Vue cli-3 应用程序时
【发布时间】：2018-06-05 23:50:54
【问题描述】：

堆栈：

Vue CLI 3.0.0-beta.11
节点 5.6
詹金斯 2.7

我使用 VUE CLI 3 在 Webstorm 中为工作构建了一个简单的概念验证。我在本地构建并创建了一些简单的 vue 组件没有问题。到目前为止，很棒的体验。

我的项目的开发依赖项之一是私有托管包，其中包含整个公司的全局样式。大多数情况下，这个包包含常见的变量、排版、结构代码等。我可以将以下内容添加到我的 vue.config.js 中，以便将 scss 文件拉入并在我的 .vue 文件中全局使用它们。使用 npm run serve 或 npm run build 在本地工作得很好。

config.module.rule('scss').oneOf('normal').use('sass-loader')
    .tap(options =>
      merge(options, {
        data: '@import "~@myCorp/mycorp.ui.styles/shared/vars";' +
               '@import "~@myCorp/mycorp.ui.styles/shared/structure";' +
               '@import "~@myCorp/mycorp.ui.styles/shared/typography";'
      }))

我花了一段时间才让它正常工作，但使用 npm run serve 似乎效果很好。此外，当我在本地运行命令时，npm run build 会输出在我的 CDN 中运行良好的正确文件，然后手动上传文件。

我遇到的问题是当我在我的 Jenkins CI 机器上尝试执行 npm run build 时。我有一个 Jenkins 工作，它基本上运行以下内容：

npm install
npm run-script build-dev    
\\This just runs vue-cli-service build --mode dev

我一直收到以下几个错误：

Module build failed: ModuleBuildError: Module build failed: 
    width: $base-spacing * 4;
      ^
    Undefined variable: "$base-spacing".

我的每个组件都会出现一次此错误，并且它们每个错误都出现在我从全局 scss 文件中使用的第一个变量上。似乎构建在加载 scss 文件时遇到问题，但我不知道会有什么不同。

就像我之前说的，Webstorm 查找文件并将它们包含在本地构建中的问题为零，但是一旦我将它们放入 Jenkins，它就无法构建。我尝试过以不同方式导入文件，通过项目中 main.scss 中的本地 scss 导入，甚至直接在我的 main.js 中导入它们，但它们不会被加载程序拾取。

我错过了什么？对于 CI/CD，我需要考虑的路径有什么不同吗？

【问题讨论】：

标签： jenkins webpack vue.js vuejs2 vue-cli

【解决方案1】：

升级到 beta-15 后，我无法再让它在本地工作。我在 cli githib 上发布了一个问题：https://github.com/vuejs/vue-cli/issues/1511

正确的答案是不要直接使用tap修改sass-loader，而是使用vue.config.js中内置的css.loaderOptions.sass块。于是，我的 vue.config.js 变成了这样：

css: {
    loaderOptions: {
      sass: {
        data: '@import "~@myCorp/mycorp.ui.styles/shared/vars";'
      }
    }
  }

效果很好！

【讨论】：