Submit Feedback
Legacy Knowledge Base
Published Jul. 2, 2025

Error: compound selectors may no longer be extended is encountered when building the themes

Written By

Pooja Bhambani

How To articles are not official guidelines or officially supporteddocumentation. They are community-contributed content and may not alwaysreflect the latest updates to Liferay DXP. We welcome your feedback toimprove How to articles!

While we make every effort to ensure this Knowledge Base is accurate, itmay not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with anyfeedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack"publication program, made available for informational purposes. Articlesin this program were published without a requirement for independentediting or verification and are provided "as is" withoutguarantee.

Before using any information from this article, independently verify itssuitability for your situation and project.

Issue

  • When creating the bare-bone theme without any customization, the build is encountered with the below error:
    [14:26:26] 'build:compile-css' errored after 4.9 s
[14:26:26] Error in plugin "sass"
Message:
    build/_css/compat/components/_dropdowns.scss
Error: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
See http://bit.ly/ExtendCompound for details.

   ╷
34 │         @extend .dropdown-item.disabled;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
Details:
    formatted: Error: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
See http://bit.ly/ExtendCompound for details.

   ╷
34 │         @extend .dropdown-item.disabled;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
    line: 34
    column: 11
    file: /Users/jordi/Downloads/Liferay/test1-theme/build/_css/compat/components/_dropdowns.scss
    status: 1
    messageFormatted: build/_css/compat/components/_dropdowns.scss
Error: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
See http://bit.ly/ExtendCompound for details.

   ╷
34 │         @extend .dropdown-item.disabled;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
    messageOriginal: compound selectors may no longer be extended.
Consider `@extend .dropdown-item, .disabled` instead.
See http://bit.ly/ExtendCompound for details.

   ╷
34 │         @extend .dropdown-item.disabled;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
    relativePath: build/_css/compat/components/_dropdowns.scss
    domainEmitter: [object Object]
    domainThrown: false

[14:26:26] 'build' errored after 5.96 s

Environment

  • Liferay DXP 7.3
  • node -v 14.17.0
  • npm -v 6.14.13

Resolution

  • The js-themes-toolkit switched the pre-processor from Libsass to Dart Sass. And, Dart Sass has introduced some breaking changes that cause builds of older themes to fail.
  • To build the themes, disable the Dart Sass in the configuration file to keep going to use the current basic tooling. 
    package.json:
    	"liferayTheme": {
		"sassOptions": {
			"dartSass": false
		},
		//...
	},

Additional Information

Did this article resolve your issue ?
Legacy Knowledge Base
Did this article resolve your issue ?