Vue меньше загрузка css "Невозможно прочитать свойство 'знаменатель' из неопределенного"

Question

У меня есть файл style.less, который я загружаю следующим образом

import "./styles/styles.less";

Файл выглядит следующим образом, мне нужно было обернуть стили, чтобы они не влияли на окружающую страницу, и заметил vue модальный диалог css не загружался (поэтому я переместил их для проверки внизу). Первоначально это было из-за того, что он не смог найти нижние 3 импорта.

.form-builder-app {
    @import './_variables.less';
    @import './_app.less';
    @import './_structure.less';
    @import './_page.less';
    @import './_section.less';
    @import './_question.less';
    @import './_controls.less';
    @import './_buttons.less';
    @import './_grid.less';
    @import './_modal.less';
    @import './_tooltips.less';
    @import './_questionProps.less';
    @import './_overrides.less';
    @import './_revert.less';
    @import './_viewMode.less';
    @import './_ie11-fixes.less';
    @import './_print.less';

}

@import '../../../../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../../../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
@import '../../../../../node_modules/vuejs-dialog/dist/vuejs-dialog.min.css';

Проблема заключается в том, что я запускаю npm run build, который вызывает в пакете нижеприведенное. json подает на него ошибки

vue-cli-service build --dest Areas/Builder/Vue/dist Areas/Builder/Vue/src/main.js"

Теперь он находит файл, о котором идет речь, но с ошибками:

error  in ./Areas/Builder/Vue/src/styles/styles.less

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):


  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 
8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
^
Cannot read property 'denominator' of undefined
      in C:\projects\Collaborator\Forms\ElectronicForms\ElectronicForms.Website\node_modules\bootstrap\dist\css\bootstrap.css (line 2291, column 2)
    at runLoaders (C:\projects\Collaborator\Forms\ElectronicForms\ElectronicForms.Website\node_modules\webpack\lib\NormalModule.js:316:20)
    at C:\projects\Collaborator\Forms\ElectronicForms\ElectronicForms.Website\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\projects\Collaborator\Forms\ElectronicForms\ElectronicForms.Website\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\projects\Collaborator\Forms\ElectronicForms\ElectronicForms.Website\node_modules\loader-runner\lib\LoaderRunner.js:111:13)

 @ ./Areas/Builder/Vue/src/main.js 8:0-30

Понятия не имею, почему это происходит, может кто-нибудь помочь, пожалуйста? ура

Answer 1

Мне удалось заставить это работать, меньше игнорируя и используя вместо этого s css. Таким образом, казалось бы, что меньше компилятор / загрузчик не может справиться с boostrap css. Вместо этого я теперь ссылаюсь на новый файл, например

Импортируйте их в main. js file

import "./styles/scss_styles.scss";

scss_styles.s css содержимое файла

// styling scoped to the form-builder-app so that it does not leak into the rest of the surrounding page
.form-builder-app {

    @import '../../../../../node_modules/bootstrap/scss/bootstrap';
    @import '../../../../../node_modules/bootstrap-vue/src/index';
    @import '../../../../../node_modules/vuejs-dialog/dist/vuejs-dialog.min.css';
}

Теперь это работает и позволяет мне охватить css только основным элементом управления, вместо того, чтобы просочиться в окружающую страницу и испортить оригинал css.

<div class="form-builder-app">
    <div id="app"></div>
</div>

Я мог бы также связать его с #app id, но просто чтобы показать, что этот подход работает.