Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nextjs and sass @extend #28510

Open
Lukortech opened this issue Aug 25, 2021 · 3 comments
Open

Nextjs and sass @extend #28510

Lukortech opened this issue Aug 25, 2021 · 3 comments
Labels
bug Issue was opened via the bug report template.

Comments

@Lukortech
Copy link

What version of Next.js are you using?

11

What version of Node.js are you using?

14.17.4

What browser are you using?

Chrome

What operating system are you using?

Windows 10

How are you deploying your application?

dev

Describe the Bug

Nextjs doesn't support sass @extend properly in .module.scss files.

Expected Behavior

I should be able to use styles\globals.scss

.centerTransform {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

class in pages\settings\some-module.scss via @extend

.someClass {
  @extend .centerTransform;
}

To Reproduce

Check the ongoing discussion in this "closed" issue.

#10475

@Lukortech Lukortech added the bug Issue was opened via the bug report template. label Aug 25, 2021
@guitheengineer
Copy link
Contributor

You can achieve it by using import at the beginning of your .module.scss file

@import '../../styles/globals.scss';

.myClass {
  @extend .centerTransform;
}

@gitChang
Copy link

gitChang commented Nov 7, 2022

I'm using Next.js v12.3.1 and still unable to use @extend of Sass.

@th0th
Copy link

th0th commented Sep 6, 2023

I still can't use the SCSS @extend with v13.4.19.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

4 participants