I get the below error while building my project

SassError: 2 arguments required, but only 1 was passed.
    width: rem(300);
           ^^^^^^^^

Below is my package.json

{
  "name": "test",
  "version": "3.0.0",
  "private": true,
  "scripts": {
   
  },
  "devDependencies": {
    "mini-css-extract-plugin": "^2.4.2",
    "node-sass": "^6.0.1",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.3",
    "sass-loader": "^12.1.0"
  },
  "dependencies": {
    "grunt-sass": "^3.1.0"
  }

}

What is the issue?

I get the below error while building my project

SassError: 2 arguments required, but only 1 was passed.
    width: rem(300);
           ^^^^^^^^

Below is my package.json

{
  "name": "test",
  "version": "3.0.0",
  "private": true,
  "scripts": {
   
  },
  "devDependencies": {
    "mini-css-extract-plugin": "^2.4.2",
    "node-sass": "^6.0.1",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.3",
    "sass-loader": "^12.1.0"
  },
  "dependencies": {
    "grunt-sass": "^3.1.0"
  }

}

What is the issue?

• javascript
• webpack
• sass
• sass-loader

4 Answers 4

Ran into the same problem today, I had "sass": "^1.26.5" in my package.json.

sass got updated yesterday to 1.65.1, your build should work with 1.64.2 https://www.npmjs.com/package/sass/v/1.65.1?activeTab=versions I got that problem due to another dependency I have no control over, so changing sass version was the only option for now. But if you used rem() in your own code, go for Ali Klein's answer.

The CSS rem() function required 2 parameters: https://developer.mozilla.org/en-US/docs/Web/CSS/rem

The rem() CSS function returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%)

If you created a custom rem() function, I suggest naming it something else as there could be a conflict.

After updating css to version 1.65.0, reserved calc functions appeared. These function calls will be analyzed as sass calculations instead of function calls: round(), mod(), rem(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs() or sign(). User-defined functions named after any of them can no longer be called without a namespace.

As you can see, rem() can no longer be a custom function. Change its name and everything will work as before.

enter link description here

In the latest iterations of CSS, rem() is used for calculating remainders.

Updated versions of Sass 1.64.2 and above see rem() now as a CSS function and not a custom function, which will throw the above error if you try to build your project.

In our case, we were using the sass-rem package, which defines a custom rem function.

Using v4 of the library and replacing usages of rem(...) in our SCSS templates with rem-convert(...) fixed the issue of the custom function overlapping with the new CSS rem() function.