Commit b539b649 authored by Marco Slooten's avatar Marco Slooten Committed by Dan Abramov
Browse files

Adds instructions to README on how to customize Bootstrap with Sass (#5211)

* Adds instructions to create a Bootstrap theme with Sass

* Update README.md

* Update README.md

* Update README.md
parent 33034190
4 merge requests!12191Lim.Pisey.168:/Identified - We are currently investigating reports of missing build logs. The issue has been identified and a resolution is in progress. We will provide a further update when available.Mar 21, 09:02 UTC,!12853brikk,!5717Automatically extract project file structure from build bundle file,!5480<!-- Thank you for sending the PR!
Showing with 21 additions and 7 deletions
+21 -7
...@@ -684,8 +684,8 @@ An alternative way of handling static assets is described in the next section. ...@@ -684,8 +684,8 @@ An alternative way of handling static assets is described in the next section.
One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this: One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
```js ```js
import { ReactComponent as Logo } from './logo.svg' import { ReactComponent as Logo } from './logo.svg';
const App = () => ( const App = () => (
<div> <div>
{/* Logo is an actual React component */} {/* Logo is an actual React component */}
<Logo /> <Logo />
...@@ -807,14 +807,28 @@ Now you are ready to use the imported reactstrap components within your componen ...@@ -807,14 +807,28 @@ Now you are ready to use the imported reactstrap components within your componen
### Using a Custom Theme ### Using a Custom Theme
> Note: this feature is available with `react-scripts@2.0.0` and higher.
Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br> Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br>
We suggest the following approach: As of `react-scripts@2.0.0` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences.
To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](http://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables.
- Create a new package that depends on the package you wish to customize, e.g. Bootstrap. ```scss
- Add the necessary build steps to tweak the theme, and publish your package on npm. // Override default variables before the import
- Install your own theme npm package as a dependency of your app. $body-bg: #000;
// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';
```
Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps. > **Note:** You must prefix imports from `node_modules` with `~` as displayed above.
Finally, import the newly created `.scss` file instead of the default Bootstrap `.css` in the beginning of your `src/index.js` file, for example:
```javascript
import './custom.scss';
```
## Adding Flow ## Adding Flow
......
Supports Markdown
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