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

罪魁祸首是_input-group.scss包中forms/文件夹中的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],
  }
}

Answer 1

在找到解决方案时将其关闭。我升级到v6.4.3，这似乎可以解决我的问题。

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

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

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

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

1 个答案: