Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Built-In Sass Support

See original GitHub issue

Feature request

Is your feature request related to a problem? Please describe.

With #8626 it was commented that the various non-css-in-js styling plugins would be deprecated in favor of built-in support. This did not happen, and my tests with the new built-in CSS support and @zeit/next-sass even showed Sass to outright fail in cases.

Describe the solution you’d like

Installation of node-sass should enable built-in Sass support, both global and CSS Modules per the original RFC suggestion.

I’ve created PR #10133 (as a start) which modified the CSS webpack config to enable .scss, .sass, .module.scss, and .modules.sass. It adds sass-loader as the only additional dependency.

Describe alternatives you’ve considered

I’ve considered rewriting @zeit/next-sass to cooperate with the current built-in CSS and CSS Module config. This would come with the benefit of not requiring sass-loader as another core dependency, but would require a complex setup to gain the same level of benefits, further user config, prolonged maintenance of the plugin, etc.

Additional context

Tests focusing on Sass need to be written, but many of the tests for output CSS should work for Sass tests.
Documentation will need to be updated to remove @zeit/next-sass references and include instructions for installing node-sass to enable.
Some additional refactoring may be able to DRY up repetition, but I also didn’t want to make individual configurations more difficult by abstracting too much. Because of this some comments from the original implementation are a bit redundant in the sass-loader.
Error messages skew towards “CSS” verbiage. There could be custom Sass messages, but I think this increases the footprint unnecessarily and Sass becomes CSS so I feel the messages work.

Let me know if this is the correct path forward and if you’d like me to continue contributing towards this feature.

Issue Analytics

State:
Created 4 years ago
Reactions:26
Comments:16 (9 by maintainers)

Top GitHub Comments

10reactions

StarpTechcommented, Jan 28, 2020

How can we set any sass loader options like includePaths ?

7reactions

Timercommented, Jan 23, 2020

This feature has been experimentally landed. Please try it out on the latest canary!

Top Results From Across the Web

Built-In Modules - Sass

Sass provides many built-in modules which contain useful functions (and the occasional mixin). These modules can be loaded with the @use rule like...

Introducing Sass Modules - CSS-Tricks

You can find a full list of built-in modules, functions, and name changes in the Sass module specification. New and changed core features....

SASS | Built-In Modules - GeeksforGeeks

Compatibility: Currently only Dart Sass supports the use of built-in modules. Other implementations like LibSass or Ruby Sass need to call ...

SASS Build-in Modules - Studytonight

SASS comes loaded with many built-in modules which are just like pre-defined stylesheets which can be directly included/imported in your stylesheet and used ......

Basic Features: Built-in CSS Support - Next.js

Next.js allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the...