Webpack Sass 编译由于单元不兼容而失败

Question

我正在将一个使用 Grunt 的旧项目升级到 Webpack 4，并且过渡非常无缝。一切都正确编译，除了 sass 文件。

构建 webpack 时，我遇到了以下错误：

./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);
-----------^

罪魁祸首是forms/文件夹中的_input-group.scss文件，该文件是foundation-sites包的一部分。如果我将$height变量硬编码为任何值，则构建将成功编译。实际上，只是那一行阻止了构建完成。

以下是我在$height变量中使用的sass变量：

• $input字体大小：0.9375rem;
• $input线高度：1雷姆;
• $input填充：0.5雷姆;

问题：知道为什么会出现错误吗？

附加信息：

我正在使用foundation-sites@6.4.1. 我node-sass一起使用sass-loader.我什至尝试切换到 dartsass实现，但仍然遇到相同的错误。

这是我的 webpack 配置的一个非常简化的版本：

// webpack.config.js
const loaders = {
sass: {
loader: 'sass-loader',
},
postCss: {
loader: 'postcss-loader',
options: {
plugins: postCssPlugins,
},
},
css: {
loader: 'css-loader',
},
miniCssExtract: {
loader: MiniCssExtractPlugin.loader,
},
}
export const config = {
module: {
test: /.s[ac]ss$/,
use: [loaders.miniCssExtract, loaders.css, loaders.postCss, loaders.sass],
}
}

Answer 1

当我找到解决方案时关闭它。我升级到v6.4.3，这似乎解决了我的问题。

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

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

更加简化并解决了我遇到的问题！