Vue less loading css “Cannot read property 'denominator' of undefined”

问题

I have a style.less file that I am loading as follows

import "./styles/styles.less";

The file looks like the below, I needed to wrap the styles so they didnt effect the surrounding page and noticed the vue modal dialog css was not being loaded (hence why I moved them out to test at the bottom). This originally was because it couldn't find the bottom 3 imports.

.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';

The issue is when I run npm run build which calls the below in the package.json file it errors

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

It now finds the file in question but it errors with the following:

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

I haven't a clue why this is happening, can anyone help please? cheers

回答1:

I managed to get this working my ignoring less and using scss instead. So it would seem that the less compiler/loader couldn't handle the boostrap css. Instead I now reference a new file e.g.

Import them in the main.js file

import "./styles/scss_styles.scss";

The scss_styles.scss file contents

// 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';
}

This now works and allows me to scope the css just to the main control, instead of it leaking out into the surrounding page and messing up the original css.

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

I could also have linked it to the #app id too, but just to show this approach does work.

来源：https://stackoverflow.com/questions/60929832/vue-less-loading-css-cannot-read-property-denominator-of-undefined

标签

twitter-bootstrap

Vue.js

npm

vue-cli