由于单元不兼容，Webpack Sass 编译失败答案

【问题标题】：Webpack Sass compilation fails due to incompatible units由于单元不兼容，Webpack Sass 编译失败
【发布时间】：2020-01-17 20:11:30
【问题描述】：

我正在将一个使用 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-font-size: 0.9375rem;
$input-line-height: 1rem;
$input-padding: 0.5rem;

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

附加信息：

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

这是我的 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],
  }
}

【问题讨论】：

标签： webpack sass zurb-foundation

【解决方案1】：

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

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

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

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

【讨论】：