Enable scss/sass support #10571

timneutkens · 2020-02-18T13:00:17Z

Enables built-in Sass support for stable use.

ijjk · 2020-02-18T13:06:43Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
buildDuration	12.2s	13.2s	⚠️ +986ms
nodeModulesSize	53.9 MB	53.9 MB	-2 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.js gzip	5.13 kB	5.13 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..54d3.js gzip	4.68 kB	4.68 kB	✓
commons.HASH.js gzip	4.06 kB	4.06 kB	✓
de003c3a9d30..6894.js gzip	16.3 kB	16.3 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	70 kB	70 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.module.js gzip	4.13 kB	4.13 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
4952ddcd88e7..dule.js gzip	5.56 kB	5.56 kB	✓
de003c3a9d30..dule.js gzip	15.1 kB	15.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	64.7 kB	64.7 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
polyfills-HASH.js gzip	4.76 kB	4.76 kB	✓
Overall change	4.76 kB	4.76 kB	✓

Client Pages

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.js gzip	1.15 kB	1.15 kB	✓
_error.js gzip	4.07 kB	4.07 kB	✓
hooks.js gzip	779 B	779 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.95 kB	2.95 kB	✓
routerDirect.js gzip	283 B	283 B	✓
withRouter.js gzip	282 B	282 B	✓
Overall change	9.73 kB	9.73 kB	✓

Client Pages Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.module.js gzip	576 B	576 B	✓
_error.module.js gzip	3.06 kB	3.06 kB	✓
hooks.module.js gzip	371 B	371 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	2.49 kB	2.49 kB	✓
routerDirect..dule.js gzip	273 B	273 B	✓
withRouter.m..dule.js gzip	272 B	272 B	✓
Overall change	7.25 kB	7.25 kB	✓

Client Build Manifests

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
index.html gzip	1.03 kB	1.03 kB	✓
link.html gzip	1.04 kB	1.04 kB	✓
withRouter.html gzip	1.03 kB	1.03 kB	✓
Overall change	3.11 kB	3.11 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
buildDuration	13.6s	14s	⚠️ +385ms
nodeModulesSize	53.9 MB	53.9 MB	-2 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.js gzip	5.13 kB	5.13 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..54d3.js gzip	4.68 kB	4.68 kB	✓
commons.HASH.js gzip	4.06 kB	4.06 kB	✓
de003c3a9d30..6894.js gzip	16.3 kB	16.3 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	70 kB	70 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.module.js gzip	4.13 kB	4.13 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
4952ddcd88e7..dule.js gzip	5.56 kB	5.56 kB	✓
de003c3a9d30..dule.js gzip	15.1 kB	15.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	64.7 kB	64.7 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
polyfills-HASH.js gzip	4.76 kB	4.76 kB	✓
Overall change	4.76 kB	4.76 kB	✓

Client Pages

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.js gzip	1.15 kB	1.15 kB	✓
_error.js gzip	4.07 kB	4.07 kB	✓
hooks.js gzip	779 B	779 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.95 kB	2.95 kB	✓
routerDirect.js gzip	283 B	283 B	✓
withRouter.js gzip	282 B	282 B	✓
Overall change	9.73 kB	9.73 kB	✓

Client Pages Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.module.js gzip	576 B	576 B	✓
_error.module.js gzip	3.06 kB	3.06 kB	✓
hooks.module.js gzip	371 B	371 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	2.49 kB	2.49 kB	✓
routerDirect..dule.js gzip	273 B	273 B	✓
withRouter.m..dule.js gzip	272 B	272 B	✓
Overall change	7.25 kB	7.25 kB	✓

Client Build Manifests

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles Overall increase ⚠️

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_error.js gzip	289 kB	289 kB	⚠️ +38 B
404.html gzip	1.44 kB	1.44 kB	✓
hooks.html gzip	1.08 kB	1.08 kB	✓
index.js gzip	290 kB	290 kB	⚠️ +79 B
link.js gzip	319 kB	319 kB	⚠️ +604 B
routerDirect.js gzip	315 kB	316 kB	⚠️ +1.06 kB
withRouter.js gzip	316 kB	317 kB	⚠️ +115 B
Overall change	1.53 MB	1.53 MB	⚠️ +1.89 kB

Commit: ffdf292

ijjk · 2020-02-18T13:25:07Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
buildDuration	12.9s	12.8s	-135ms
nodeModulesSize	53.9 MB	53.9 MB	-2 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.js gzip	5.13 kB	5.13 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..54d3.js gzip	4.68 kB	4.68 kB	✓
commons.HASH.js gzip	4.06 kB	4.06 kB	✓
de003c3a9d30..6894.js gzip	16.3 kB	16.3 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	70 kB	70 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.module.js gzip	4.13 kB	4.13 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
4952ddcd88e7..dule.js gzip	5.56 kB	5.56 kB	✓
de003c3a9d30..dule.js gzip	15.1 kB	15.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	64.7 kB	64.7 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
polyfills-HASH.js gzip	4.76 kB	4.76 kB	✓
Overall change	4.76 kB	4.76 kB	✓

Client Pages

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.js gzip	1.15 kB	1.15 kB	✓
_error.js gzip	4.07 kB	4.07 kB	✓
hooks.js gzip	779 B	779 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.95 kB	2.95 kB	✓
routerDirect.js gzip	283 B	283 B	✓
withRouter.js gzip	282 B	282 B	✓
Overall change	9.73 kB	9.73 kB	✓

Client Pages Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.module.js gzip	576 B	576 B	✓
_error.module.js gzip	3.06 kB	3.06 kB	✓
hooks.module.js gzip	371 B	371 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	2.49 kB	2.49 kB	✓
routerDirect..dule.js gzip	273 B	273 B	✓
withRouter.m..dule.js gzip	272 B	272 B	✓
Overall change	7.25 kB	7.25 kB	✓

Client Build Manifests

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
index.html gzip	1.03 kB	1.03 kB	✓
link.html gzip	1.04 kB	1.04 kB	✓
withRouter.html gzip	1.03 kB	1.03 kB	✓
Overall change	3.11 kB	3.11 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall decrease ✓

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
buildDuration	13.8s	14s	⚠️ +235ms
nodeModulesSize	53.9 MB	53.9 MB	-2 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.js gzip	5.13 kB	5.13 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..54d3.js gzip	4.68 kB	4.68 kB	✓
commons.HASH.js gzip	4.06 kB	4.06 kB	✓
de003c3a9d30..6894.js gzip	16.3 kB	16.3 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	70 kB	70 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
main-HASH.module.js gzip	4.13 kB	4.13 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
4952ddcd88e7..dule.js gzip	5.56 kB	5.56 kB	✓
de003c3a9d30..dule.js gzip	15.1 kB	15.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	64.7 kB	64.7 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
polyfills-HASH.js gzip	4.76 kB	4.76 kB	✓
Overall change	4.76 kB	4.76 kB	✓

Client Pages

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.js gzip	1.15 kB	1.15 kB	✓
_error.js gzip	4.07 kB	4.07 kB	✓
hooks.js gzip	779 B	779 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.95 kB	2.95 kB	✓
routerDirect.js gzip	283 B	283 B	✓
withRouter.js gzip	282 B	282 B	✓
Overall change	9.73 kB	9.73 kB	✓

Client Pages Modern

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_app.module.js gzip	576 B	576 B	✓
_error.module.js gzip	3.06 kB	3.06 kB	✓
hooks.module.js gzip	371 B	371 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	2.49 kB	2.49 kB	✓
routerDirect..dule.js gzip	273 B	273 B	✓
withRouter.m..dule.js gzip	272 B	272 B	✓
Overall change	7.25 kB	7.25 kB	✓

Client Build Manifests

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles Overall increase ⚠️

	zeit/next.js canary	timneutkens/next.js add/enable-sass	Change
_error.js gzip	289 kB	290 kB	⚠️ +796 B
404.html gzip	1.44 kB	1.44 kB	✓
hooks.html gzip	1.08 kB	1.08 kB	✓
index.js gzip	290 kB	289 kB	-612 B
link.js gzip	320 kB	319 kB	-971 B
routerDirect.js gzip	317 kB	317 kB	⚠️ +162 B
withRouter.js gzip	316 kB	316 kB	⚠️ +685 B
Overall change	1.53 MB	1.53 MB	⚠️ +60 B

Commit: 523cc2c

malte-wessel · 2020-02-18T15:53:58Z

Any plans for defining sassOptions in the config?

aralroca · 2020-02-18T17:16:52Z

How to migrate from nextSass plugin to this? Is there any plan to add some codemod transformation into https://github.com/zeit/next-codemod repo?

balazsorban44 · 2020-02-19T09:03:15Z

@aralroca
For me it was simply:

next.config.js:

- const withSass = require("@zeit/next-sass")
- module.exports = withSass({
+module.exports = {
 /*Your config here*/
- })
+ }

aralroca · 2020-02-19T09:47:44Z

@aralroca
For me it was simply:

next.config.js:

- const withSass = require("@zeit/next-sass")
- module.exports = withSass({
+module.exports = {
 /*Your config here*/
- })
+ }

@balazsorban44 However, if you have sass without "css modules" into the component level, is not so trivial, isn't it?

balazsorban44 · 2020-02-19T09:50:04Z

True, sorry!

timneutkens · 2020-02-19T09:53:38Z

find . -depth -name "*.scss" -exec sh -c 'mv "$1" "${1%.scss}.module.scss"' _ {} \;

Then search/replace in the codebase: .scss -> .module.scss

Enable scss/sass support

ffdf292

timneutkens requested review from ijjk, lfades and Timer as code owners February 18, 2020 13:00

Timer approved these changes Feb 18, 2020

View reviewed changes

Timer added ready to land labels Feb 18, 2020

Timer added this to the 9.3.0 milestone Feb 18, 2020

Timer added 2 commits February 18, 2020 08:18

Merge branch 'canary' into add/enable-sass

906b6f3

Merge branch 'canary' into add/enable-sass

523cc2c

Timer merged commit 743bf5d into vercel:canary Feb 18, 2020

timneutkens deleted the add/enable-sass branch February 18, 2020 16:08

khades mentioned this pull request Feb 20, 2020

feature: support experimental .sass\.scss martpie/next-transpile-modules#69

Closed

snyk-bot mentioned this pull request Apr 9, 2020

[Snyk] Upgrade next from 9.1.1 to 9.3.1 cds-snc/a11y-reporting#6

Open

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable scss/sass support #10571

Enable scss/sass support #10571

timneutkens commented Feb 18, 2020 •

edited

ijjk commented Feb 18, 2020

ijjk commented Feb 18, 2020

malte-wessel commented Feb 18, 2020

aralroca commented Feb 18, 2020 •

edited

balazsorban44 commented Feb 19, 2020

aralroca commented Feb 19, 2020 •

edited

balazsorban44 commented Feb 19, 2020

timneutkens commented Feb 19, 2020

Enable scss/sass support #10571

Enable scss/sass support #10571

Conversation

timneutkens commented Feb 18, 2020 • edited

ijjk commented Feb 18, 2020

Stats from current PR

ijjk commented Feb 18, 2020

Stats from current PR

malte-wessel commented Feb 18, 2020

aralroca commented Feb 18, 2020 • edited

balazsorban44 commented Feb 19, 2020

aralroca commented Feb 19, 2020 • edited

balazsorban44 commented Feb 19, 2020

timneutkens commented Feb 19, 2020

timneutkens commented Feb 18, 2020 •

edited

aralroca commented Feb 18, 2020 •

edited

aralroca commented Feb 19, 2020 •

edited