Vue 少加载 css "Cannot read property 'denominator' of undefined"

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 在 package.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

我设法让这个工作我忽略了 less 并使用 scss 代替。所以看起来 less compiler/loader 无法处理 boostrap css。相反，我现在引用一个新文件，例如

将它们导入 main.js 文件

import "./styles/scss_styles.scss";

scss_styles.scss 文件内容

// 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，但只是为了证明这种方法确实有效。

Vue 少加载 css "Cannot read property 'denominator' of undefined"

Vue less loading css "Cannot read property 'denominator' of undefined"

npm

twitter-bootstrap

vue.js

vue-cli