Webpack 由于单元不兼容，网页包Sass编译失败

我正在将一个使用Grunt的旧项目升级到Webpack4，过渡非常顺利。除sass文件外，所有文件都能正确编译

在构建网页包时，我遇到以下错误：

./src/assets/scss/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Incompatible units: 'rem' and 'rem*rem'.
        on line 27 of node_modules/foundation-sites/scss/forms/_input-group.scss, in mixin `foundation-form-prepostfix`
        from line 30 of node_modules/foundation-sites/scss/forms/_forms.scss, in mixin `foundation-forms`
        from line 10 of src/assets/scss/_custom-foundation.scss
        from line 5 of /home/rogelio/Desktop/localdev/Home/src/assets/scss/styles.scss
>>   $height: $height: ($input-font-size * $input-line-height) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
   -----------^

罪魁祸首是

表单

文件夹中的

\u input-group.scss

文件，它是

基金会网站

包的一部分。如果我将

$height

变量硬编码为任何值，则生成将成功编译。实际上，只有一行代码阻止了构建的完成

以下是在

$height

变量中使用的我的sass变量：

• $input字体大小：0.9375rem
• $input行高：1rem
• $input padding:0.5rem

问：你知道为什么会出错吗

其他信息：

我正在使用

基金会-sites@6.4.1

。 我正在使用

节点sass

和

sass加载器

一起使用。我甚至尝试切换到dart

sass

实现，但仍然得到相同的错误

下面是我的网页配置的一个非常简化的版本：

//webpack.config.js
常量加载程序={
sass：{
加载器：“sass加载器”，
},
邮政编码：{
加载器：“postss加载器”，
选项：{
插件：postsssplugins，
},
},
css:{
加载器：“css加载器”，
},
迷你性生殖道：{
加载器：MiniCssExtractPlugin.loader，
},
}
导出常量配置={
模块：{
测试：/\.s[ac]ss$/,，
用法：[loaders.miniCssExtract、loaders.css、loaders.postss、loaders.sass]，
}
}

在找到解决方案后关闭此对话框。我升级到v6.4.3，这似乎解决了我的问题

似乎在v6.4.3中，该行已更改为：

 $height: ($input-font-size + $form-spacing * 1.5);

简化了很多，解决了我遇到的问题