Sass compile error when using min() or max()

sage
1

I’m getting an error when i run yarn build:

Module build failed: ModuleBuildError: Module build failed: Incompatible units: 'px' and '%'.

The line causing the error is:

width: min(100%, 512px);

Has anyone else come across this, or know of a solution?

2

Yes, this will probably help:

1 Like
3

@strarsis Thanks I’ll check it out and report back!

4

@strarsis I’m hesitating to update package.json with "sass": "^1.41.0" instead of "node-sass": "^5.0.0". The theme I’m working on is on sage 9.0.10, not your sage 9.1 - Do you know if I would be able to swap node-sass for sass without any extra knock-on effects, eg to the webpack build etc?

It would really only be for this small use case of min() and max() in my sass, which is easy enough for me to work around by using width and max-width.

Reading through the other thread, you’ve put in some amazing work there! I’ll certainly be giving it a try next time!

5

It seems that for node-sass there is a workaround, so you don’t have to swap it out for dart-sass or update it:


This workaround uses the native CSS min/max CSS functions, which are also fully supported now:
https://caniuse.com/?search=min

If you can’t use the workaround and need native support for this, the sass-loader supports dart-sass with release 7.x (https://github.com/webpack-contrib/sass-loader/tree/v8.0.0), so you could update sass-loader from 6.x to 7.x and check whether this works out of the box.

6

This topic was automatically closed after 42 days. New replies are no longer allowed.