From 8591c2da595e5db1795ed87741913e11a3756dc0 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Thu, 13 Oct 2022 15:03:20 -0500 Subject: [PATCH] fix(tutorial): remove optimize sass from step 5 (#3192) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../developing/react-tutorial/step-5.mdx | 54 ------------------- 1 file changed, 54 deletions(-) diff --git a/src/pages/developing/react-tutorial/step-5.mdx b/src/pages/developing/react-tutorial/step-5.mdx index 68866bce6ef..377edbf0930 100644 --- a/src/pages/developing/react-tutorial/step-5.mdx +++ b/src/pages/developing/react-tutorial/step-5.mdx @@ -110,60 +110,6 @@ Before we get started, [create an IBM Cloud account](https://cloud.ibm.com/registration) if you don't already have one, as we'll be deploying there in a bit. -## Optimize Sass - -So far we've been developing in a, well, development environment where static -asset optimization hasn't been a priority. If you reference `/src/index.scss`, -you'll see one `@import` that is pulling in Carbon's full Sass build. - -```scss path=src/index.scss -$feature-flags: ( - grid-columns-16: true, -); - -@import 'carbon-components/scss/globals/scss/styles.scss'; -``` - -To give you an idea of what's all included, open up -`node_modules/carbon-components/scss/globals/scss/styles.scss`. You'll see -imports for components like accordion, slider, tooltip, etc. Since we aren't -using those components, let's exclude them from our built stylesheets. Keeping -the `$feature-flags` Sass map, replace the `styles.scss` import with: - -```scss path=src/index.scss -// Feature flags -$css--font-face: true; -$css--plex: true; - -// Global styles -@import 'carbon-components/scss/globals/scss/css--font-face'; -@import 'carbon-components/scss/globals/grid/grid'; - -// Carbon components -@import 'carbon-components/scss/components/breadcrumb/breadcrumb'; -@import 'carbon-components/scss/components/button/button'; -@import 'carbon-components/scss/components/data-table/data-table'; -@import 'carbon-components/scss/components/link/link'; -@import 'carbon-components/scss/components/pagination/pagination'; -@import 'carbon-components/scss/components/tabs/tabs'; -@import 'carbon-components/scss/components/ui-shell/ui-shell'; -``` - -In comparing to the included `carbon-components/scss/globals/scss/styles.scss`, -you may be asking what happened to importing `_vars.scss`, `_colors.scss`, -`_theme.scss`, etc.? - -Many of those global Sass partials get imported through the components. For -example, open -`node_modules/carbon-components/scss/components/button/_button.scss` to see its -dependencies. No harm in importing them as -`carbon-components/scss/globals/scss/styles.scss` does, but for simplicity here, -we'll let the components pull them in. - -You can read more about optimizing Carbon's Sass in the -[Carbon Design System publication](https://medium.com/carbondesign/minimal-css-with-carbon-b0c089ccfa71) -on Medium. - ## Build for production Before we deploy our app, we need to create an optimized production build with