You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: template/README.md
+21-7
Original file line number
Diff line number
Diff line change
@@ -684,8 +684,8 @@ An alternative way of handling static assets is described in the next section.
684
684
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:
685
685
686
686
```js
687
-
import { ReactComponentasLogo } from'./logo.svg'
688
-
constApp= () => (
687
+
import { ReactComponentasLogo } from'./logo.svg';
688
+
constApp= () => (
689
689
<div>
690
690
{/* Logo is an actual React component */}
691
691
<Logo />
@@ -807,14 +807,28 @@ Now you are ready to use the imported reactstrap components within your componen
807
807
808
808
### Using a Custom Theme
809
809
810
+
> Note: this feature is available with `[email protected]` and higher.
811
+
810
812
Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br>
811
-
We suggest the following approach:
813
+
As of `[email protected]` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences.
814
+
815
+
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.
812
816
813
-
- Create a new package that depends on the package you wish to customize, e.g. Bootstrap.
814
-
- Add the necessary build steps to tweak the theme, and publish your package on npm.
815
-
- Install your own theme npm package as a dependency of your app.
817
+
```scss
818
+
// Override default variables before the import
819
+
$body-bg: #000;
820
+
821
+
// Import Bootstrap and its default variables
822
+
@import'~bootstrap/scss/bootstrap.scss';
823
+
```
816
824
817
-
Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps.
825
+
> **Note:** You must prefix imports from `node_modules` with `~` as displayed above.
826
+
827
+
Finally, import the newly created `.scss` file instead of the default Bootstrap `.css` in the beginning of your `src/index.js` file, for example:
0 commit comments