Skip to content

Commit

Permalink
docs(website): removed documentation around pre-compiling styles
Browse files Browse the repository at this point in the history
This should no longer be an issue when using `@use "react-md";`
  • Loading branch information
mlaursen committed Aug 13, 2021
1 parent d8ddf51 commit 29b5d74
Showing 1 changed file with 0 additions and 91 deletions.
91 changes: 0 additions & 91 deletions packages/documentation/src/guides/advanced-installation.md
Expand Up @@ -88,97 +88,6 @@ To use the UMD bundle, choose either the font or svg icon bundle and a new
Check out the #material-icons package for more information about the separate
icon components.

## Pre-compiling the base react-md styles for quicker builds

The initial build for `react-md` styles can take awhile since it does a lot
behind the scenes to validate the different colors, contrast ratios, and other
things to prevent errors. Since you won't really be changing the `react-md`
styles much once you've defined your theme or other custom overrides, you can
speed up this process by just pre-building the base `react-md` CSS file. If you
are using all the default "feature flags" within `react-md`, you can use one of
the [CDN hosted pre-compiled themes](/guides/cdn-links#pre-compiled-themes).

If you have changed more than just the color variables and the light/dark theme
toggle, you'll need to manually compile the base `react-md` styles yourself. The
[including styles without webpack] guide will go into full details for this, but
here's a quick version.

First, install `node-sass` if you haven't already:

```sh
npm install --save-dev node-sass
```

Or with `yarn`:

```sh
yarn add --dev node-sass
```

Next, create a new `src/react-md.scss` file that will import the `react-md`
library along with your variable overrides:

```scss
@import "./my-custom-variables";

// or just define them in this file
$rmd-list-vertical-padding: 0.565rem;
$rmd-icon-use-font-icons: false;
$rmd-icon-icon-spacing-with-text: 0.75rem;

@import "react-md/dist/scss/styles";
```

> Note that there is no leading tilde (`~`) for the `@import` statement for the
> react-md styles file along with now being `dist/scss` instead of just `dist`.
> This is to work without webpack.
Next, create a new script in your `package.json` to compile the base styles:

```diff
"scripts": {
"start": "react-scripts start",
+ "styles": "node-sass --include-path=node_modules src/react-md.scss src/react-md.css",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
```

> Note that `node-sass` is run with `--include-path=node_modules`. This is
> required now that it is being compiled without webpack.
Run the new `styles` script to generate your `src/index.css` file:

```sh
npm run styles
```

Or with `yarn`:

```sh
yarn styles
```

Finally, update the `src/index.js` to include the newly created `react-md.css`
file:

```diff
+import './react-md.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
```

You're done! The normal build process will now include the newly compiled
`react-md.css` file and handle the auto-prefixing based on the `browserlist`.
Depending on your preference, you can commit this generated file to `git` if you
know it won't change much, add a `postinstall` script to automatically generate
this file for you, or use something like [npm-run-all] to run the `styles`
command before the `react-scripts start`.

## Self-hosting the fonts

Sometimes it might not be ideal to use [Google Fonts] for providing the fonts
Expand Down

0 comments on commit 29b5d74

Please sign in to comment.