Skip to content

[Bug]: New version of SASS package does not work with Carbon (compatibility issue) #14415

Description

@thanusiak

Package

carbon-components

Browser

Chrome

Package version

10.58.8

React version

v18,v20

Description

New version of SASS:
https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1651

seems to break the rem() function defined by Carbon.

This results in compilation problems during 'rpm run build'

SassError: 2 arguments required, but only 1 was passed.

42 │ min-height: rem(40px);
│ ^^^^^^^^^

node_modules/carbon-components/scss/components/accordion/_accordion.scss 42:17 accordion()
node_modules/carbon-components/scss/components/accordion/_accordion.scss 254:3 @content
node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss 23:5 exports()
node_modules/carbon-components/scss/components/accordion/_accordion.scss 253:1 @import
node_modules/carbon-components/scss/globals/scss/styles.scss 119:9 @import
src/App.scss 12:9

Reproduction/example

Problem is during compilation

Steps to reproduce

Import sass (https://www.npmjs.com/package/sass) in your project - its a dependency of sass-loader (for example).
Make sure you get the latest version (1.65.1).

Import
@import "~carbon-components/scss/globals/scss/styles.scss";
in your scss file

Try executing npm run build

Temporary w/a:

set:
"sass": "1.64.2"
in your override

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

Status
✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions