A vite+react+typescript+sass+bootstrap starter
gh repo clone calidion/Vite-React-Typescript-Sass-Bootstrap-Starter {your-project-name}
cd {your-project-name}
yarn
yarn dev
yarn create vite
then you should fill in your project name with prompt:
? Project name: › vite-project
after filled in your project name, you should choose the framework you would like to use with prompt like this:
? Select a framework: › - Use arrow-keys. Return to submit.
❯ vanilla
vue
react
preact
lit
svelte
here we choose react
and more specifically react-ts
as we will see the following variants selection section after react
chosen.
? Select a variant: › - Use arrow-keys. Return to submit.
❯ react
react-ts
Now we have a react + typescript project ready.
Then we start to add support for bootstrap and sass.
Add dependency to package.json
yarn add bootstrap
yarn add @popperjs/core
yarn add --dev @types/node
yarn add --dev sass
Change index.css
to index.scss
Change App.css
to App.scss
import './index.css'
to
import './index.scss'
import './App.css'
to
import './App.scss'
import { Tooltip, Toast, Popover } from 'bootstrap';
Normally you don't need import bootstrap package. But when you need Tooltip
, Toast
, Popover
to work properly, you need to import them into your react components.
yarn dev
and open the url, you will see a page similiar to the following picture: