“ModuleBuildError: Undefined variable: "$base-spacing" when attempting to build Vue cli-3 app on Jenkins Server

Question

堆栈：

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

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

我的项目的开发依赖项之一是私有托管包，其中包含整个公司的全局样式。大多数情况下，这个包包含常见的变量、排版、结构代码等。我能够将以下内容添加到我的 vue.config.js 中，以便拉入 scss 文件并在我的 .vue 文件中全局使用它们。在本地使用 npm 运行 serve 或 npm 运行 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 运行 serve 似乎效果很好。此外，当我在本地运行命令然后手动上传文件时，npm 运行 build 输出正确的文件，这些文件在我的 CDN 中运行良好。

我遇到的问题是当我尝试在我的 Jenkins CI 框上执行 npm 运行 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 我需要考虑的路径有什么不同吗？

Answer 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";'
      }
    }
  }

效果很好！

“ModuleBuildError: Undefined variable: "$base-spacing" when attempting to build Vue cli-3 app on Jenkins Server

“ModuleBuildError: Undefined variable: "$base-spacing" when attempting to build Vue cli-3 app on Jenkins Server

jenkins

webpack

vue.js

vuejs2

vue-cli