"ModuleBuildError: неопределенная переменная: "$base-spacing"при попытке построить приложение Vue cli-3 на сервере Jenkins".

Question

Стек:

• 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, когда я запускаю команду локально, а затем загружаю файлы вручную.

Проблема у меня возникает, когда я пытаюсь выполнить npm run build на моем компьютере Jenkins CI. У меня есть работа Дженкинса, которая по существу выполняет следующее:

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, сборка прекращается. Я пытался импортировать файлы различными способами, через локальный импорт scss в моем файле main.scss в моем проекте или даже импортируя их непосредственно в мой файл main.js, но они не были загружены загрузчиками.

Что мне не хватает? Есть ли что-то другое в путях, которые мне нужно учитывать для CI/CD?

Answer 1

После обновления до бета-15 я больше не мог заставить его работать локально. Я отправил вопрос в адрес Клиента: https://github.com/vuejs/vue-cli/issues/1511

Правильный ответ - не модифицировать загрузчик sass напрямую, используя tap, а использовать встроенный блок css.loaderOptions.sass в vue.config.js. Таким образом, мой vue.config.js превратился в это:

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

Работает отлично!