SassError: expected ";" (before !important when using Tailwindcss)

Bug Report

Affected Package

"@angular/core": "^12.0.1",

Is this a regression?

Yes. Tailwind used to work perfectly fine in Angular 11 with the node-sass based sass-loader and postcss-loader in a custom webpack.config.js.

Description

I’m trying to migrate my app from Angular 11.2.3 to 12.0.1 and along with it Tailwind from 1.4.5 to 2.1.2. It’s nice that with Angular 12 I don’t need a custom webpack.config.js to load Tailwind but the switch to dart-sass (I assume) is messing with the loading of my scss files. It doesn’t understand @apply bg-green-500 !important; while @apply bg-green-500; and background: green !important; work fine.

Minimal Reproduction

https://angular12-tailwindcss-bug.stackblitz.

Exception or Error


./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: SassError: expected ";".
  ╷
9 │   @apply bg-green-500 !important;
  │                      ^
  ╵
  src/styles.scss 9:23  root stylesheet

Your Environment

Angular Version:


@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

Issue Analytics

State:
Created 2 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

2reactions

clydincommented, May 24, 2021

From looking through the Tailwind documentation, it appears this is an expected interaction between Tailwind and Sass. The Tailwind documentation has a specific section on this exact issue: https://tailwindcss.com/docs/using-with-preprocessors#sass

Essentially instead of @apply bg-red-500 !important;, use @apply bg-red-500 #{!important};

1reaction

martinsotirovcommented, May 24, 2021

No idea how I missed that interpolation trick but thanks for digging it up, @clydin!

Top Results From Across the Web

SassError: expected ";" (before !important when using ... - GitHub

It's the combination of @apply and !important that seems to be messing with the compilation of my css. Angular with Sass and Tailwindcss...

Using with Preprocessors - Tailwind CSS

The most important thing to understand about using Tailwind with a preprocessor is that preprocessors like Sass, Less, and Stylus run separately, before...

How do you get rid of these SASS linting errors when using ...

Solution for both .css and .scss. At the root level of your project, update or create a dir .vscode with a file settings.json...

Sass vs Tailwind CSS vs Styled-components - TTT Studios

Setting the foundation for your learning is important, and should be done prior to learning any new “fancier” ideas. Sass is a preprocessor ......

npm ERR! path node_modules\node-sass Code Example

Queries related to “npm ERR! path node_modules\node-sass”. node-sass command failed · node-sass error · node sass command failed · npm i node-sass error...