Unverified Commit 08ddde5d authored by Luis Filipe's avatar Luis Filipe Committed by GitHub
Browse files

docs(Stylesheets): Add basic instructions to setup with Sass an… (#4627)



* docs(Stylesheets): Add basic instructions to setup with Sass and customize Bootstrap in Sass

#4578

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarBrady Pascoe <18705892+bpas247@users.noreply.github.com>

* docs(introduction.mdx): update introduction.mdx to include suggestion on PR review

re #4627

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarBrady Pascoe <18705892+bpas247@users.noreply.github.com>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarBrady Pascoe <18705892+bpas247@users.noreply.github.com>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarBrady Pascoe <18705892+bpas247@users.noreply.github.com>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarBrady Pascoe <18705892+bpas247@users.noreply.github.com>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarMax Schmitt <max@schmitt.mx>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarMax Schmitt <max@schmitt.mx>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarMax Schmitt <max@schmitt.mx>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarMax Schmitt <max@schmitt.mx>

* Update www/src/pages/getting-started/introduction.mdx
Co-Authored-By: default avatarMax Schmitt <max@schmitt.mx>

* docs(introduction.mdx): refactor casing - css to CSS

rel #4627
Co-authored-by: default avatarBrady Pascoe <18705892+bpas247@users.noreply.github.com>
Co-authored-by: default avatarMax Schmitt <max@schmitt.mx>
parent ef1861b0
......@@ -7,7 +7,7 @@ import DocLink from '../../components/DocLink';
<p className="lead">Learn how to include React Bootstrap in your project</p>
### Installation
## Installation
The best way to consume React-Bootstrap is via the npm package which
you can install with `npm` (or `yarn` if you prefer).
......@@ -23,9 +23,11 @@ npm install react-bootstrap bootstrap
## Stylesheets
Because React-Bootstrap doesn't depend on a very precise version of
Bootstrap, we don't ship with any included css. However, some
Bootstrap, we don't ship with any included CSS. However, some
stylesheet **is required** to use these components.
### CSS
```
{/* The following line can be included in your src/index.js or App.js file*/}
......@@ -38,12 +40,53 @@ more information about the benefits of using a CDN can be found
<CssCodeBlock />
For more advanced use cases you can also use a bundler like Webpack
or Browserify to include the CSS files for you as part of your build
process but that is beyond the scope of this guide. Also see
[the Bootstrap docs](https://getbootstrap.com/docs/4.3/getting-started/theming/)
for details about customizing stylesheets to match your component
use.
### Sass
In case you are using **Sass** the simplest way is to include the Bootstrap’s source Sass files
in your main Sass file and then require it on your `src/index.js` or `App.js` file.
This applies to a typical `create-react-app` application in other use cases you might have to setup
the bundler of your choice to compile Sass/SCSS stylesheets to CSS.
```
/* The following line can be included in a src/App.scss */
@import "~bootstrap/scss/bootstrap";
/* The following line can be included in your src/index.js or App.js file */
import './App.scss';
```
#### Customize Bootstrap
If you wish to customize the Bootstrap theme or any Bootstrap variables
you can create a custom Sass file:
```
/* The following block can be included in a custom.scss */
/* make the customizations */
$theme-colors: (
"info": tomato,
"danger": teal
);
/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";
```
... And import it on the main Sass file.
```
/* The following line can be included in a src/App.scss */
@import "custom";
```
### Advanced usage
See [the Bootstrap docs](https://getbootstrap.com/docs/4.3/getting-started/theming/)
for more advanced use cases and details about customizing stylesheets.
### Importing
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment