From a8c00105716ded2dab44cf9ae4b46d8a2c4d882e Mon Sep 17 00:00:00 2001 From: Balint Lendvai Date: Wed, 15 Jul 2020 16:17:19 +0200 Subject: [PATCH] docs: update readme with carbon optimizations --- examples/with-carbon-components/README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/examples/with-carbon-components/README.md b/examples/with-carbon-components/README.md index a80d9e677aef5..aac590a25cd60 100644 --- a/examples/with-carbon-components/README.md +++ b/examples/with-carbon-components/README.md @@ -42,3 +42,12 @@ yarn dev ``` Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +## Optimizations +In this example we import carbon components in the `styles/custom-theme.scss` file like this: +@import '~carbon-components/scss/globals/scss/styles.scss'; + +When we start to consider the performance of this approach, however, it becomes clear that this will include every single bit of CSS that Carbon outputs. Sometimes, you totally need everything that the project provides, but for a good number of teams you may find yourself using only a subset of our components. Here is a great article about how you can optimize your application using carbon components: +https://medium.com/carbondesign/minimal-css-with-carbon-b0c089ccfa71 + +