0

New user of vanilla Emacs 28.1 here, I just installed web-mode and it works great so far except for CSS and SASS / SCSS files. With those, web-mode doesn't provide any syntax highlighting or colorizing. These are my settings:

(setq web-mode-enable-css-colorization t
      web-mode-enable-front-matter-block t
      web-mode-engines-alist
      '(("liquid" . "\\.html\\'")
        ("liquid" . "\\.xml\\'")))
(add-to-list 'auto-mode-alist '("\\.css\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.sass\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.xml\\'" . web-mode))

Also tried to assign CSS / SCSS engines to CSS / SASS / SCSS files but no luck there.

Giving M-x web-mode-set-content-type CSS or SCSS didn't work either.

Trying different themes also didn't change anything.

All tested files are fine with css-mode and scss-mode.

Any idea what I could do to fix this?

Thank you :)

SASS with scss-mode SASS with web-mode

Improve this question
1
  • 1
    Please do not vandalize your posts. By posting on the Stack Exchange network, you've granted a non-revocable right for SE to distribute that content (under the CC BY-SA 4.0 license). By SE policy, any vandalism will be reverted.
    – tripleee
    Commented Aug 11, 2022 at 8:33

2 Answers 2

Reset to default
0

except for CSS and SASS / SCSS files

Don't use web-mode for those files.

Emacs has good support for CSS and (in recent versions) SCSS files by default, so there's no reason to tell it to do anything different.

I can't help you with that semantic-indentation SASS format, though. (Personally I'd want to use SCSS syntax regardless of Emacs support, but maybe there's something which will deal with that.)

Improve this answer
0
0

Interesting. I use web-mode with *.css and *.scss files and I get syntax highlighting there. But I get no syntax highlighting for *.sass files. I do get syntax highlighting for sass inside html, using <style lang="sass">. And web-mode source code shows it supports sass. So I think it is just not recognizing *.sass files correctly.

I got syntax highlighting in *.sass files to work by adding:

(add-to-list 'auto-mode-alist
             '("\\.sass\\'" . web-mode))
(add-to-list 'web-mode-content-types
             '("sass" . "\\.sass\\'"))

You already have the first of these. And you tried M-x web-mode-set-content-type, which worked for me, but only for the current buffer.

Improve this answer
2
  • Odd! Also: it's interesting that the --- and a and blockquote are getting highlighted, but nothing else is.
    – amitp
    Commented Aug 10, 2022 at 22:32
  • I tested it again and it highlights my --- and also a and blockquote. But unlike your screenshot, mine also highlights color: and font-size: etc. in the web-mode-css-property-name-face. Sadly I don't know why yours doesn't.
    – amitp
    Commented Aug 10, 2022 at 22:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.