“ModuleBuildError:未定义变量:在Jenkins上构建Vue cli-3应用程序时，"$base-spacing”

Question

堆叠：

• Vue CLI 3.0.0-beta.11
• 节点5.6
• Jenkins 2.7

我使用VUE CLI 3在Webstorm中为工作建立了一个简单的概念证明。我在本地构建和创建一些简单的vue组件时没有问题。到目前为止，非常好的经验。

我的项目的开发依赖项之一是私有的包，它包含整个公司的全局样式。大多数情况下，这个包包含常见的vars、排版、结构代码等。我能够在我的vue.config.js中添加以下内容，以便将scss文件拉进并在我的.vue文件中全局使用它们。使用npm运行服务或npm运行构建在本地工作很好。

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运行服务。此外，在本地运行命令时输出在我的CDN中工作很好的正确文件，然后手动上传这些文件。

我遇到的问题是，当我在Jenkins CI盒上尝试和执行npm运行构建时。我有一个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加载程序，而是使用vue.config.js中内置的sass加载程序块。因此，我的vue.config.js变成了这样：

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

效果很好！