Vue少加载css“无法读取未定义的属性'分母'”答案

【问题标题】：Vue less loading css "Cannot read property 'denominator' of undefined"Vue少加载css“无法读取未定义的属性'分母'”
【发布时间】：2020-03-30 11:45:54
【问题描述】：

我有一个 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

我不知道为什么会发生这种情况，有人可以帮忙吗？干杯

【问题讨论】：

看起来像center/8px。尝试将其更改为 10px 或其他内容，看看是否可以修复它。如果是这样，您需要弄清楚该变量中心应该在哪里定义以及为什么没有。
感谢 AlexMA，感谢指针，删除整行有效，但相信这是在我进行 npm 安装时通过 npm 拉入的。所以不知道从哪里开始，我确实问了这个问题stackoverflow.com/questions/60930928/…，但得到一个代码希特勒没有任何帮助并阻止了一个有效的问题！
那么可能是库中的错误，但值得怀疑。很可能你没有导入正确的东西。只认为我能想到的是尝试直接从节点模块 dist 文件夹中导入 css 对我来说看起来很可疑。如果 npm 库的文档告诉你，我只会这样做。
OK 我继续玩，谢谢指点：）

标签： twitter-bootstrap vue.js npm vue-cli

【解决方案1】：

我设法让这个工作我忽略了更少，而是使用 scss。因此，似乎较少的编译器/加载器无法处理 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，但只是为了表明这种方法确实有效。

【讨论】：