Skip to content

Commit

Permalink
fix(tutorial): remove optimize sass from step 5 (#3192)
Browse files Browse the repository at this point in the history
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
tay1orjones and kodiakhq[bot] authored Oct 13, 2022
1 parent e9bb1ba commit 8591c2d
Showing 1 changed file with 0 additions and 54 deletions.
54 changes: 0 additions & 54 deletions src/pages/developing/react-tutorial/step-5.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

1 comment on commit 8591c2d

@vercel
Copy link

@vercel vercel bot commented on 8591c2d Oct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.