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

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

0 голосов
/ 06 июня 2018

Стек:

  • Vue CLI 3.0.0-beta.11
  • Узел 5.6
  • Jenkins 2.7

Я использовалVUE CLI 3 для создания простой концепции в Webstorm для работы.У меня не было проблем со сборкой локально и созданием нескольких простых компонентов vue.Пока что большой опыт.

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

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

1 Ответ

0 голосов
/ 08 июня 2018

После обновления до бета-15 у меня больше не было возможности заставить это работать локально.Я отправил вопрос в cli githib: 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";'
      }
    }
  }

Отлично работает!

...