I am building an ionic 4 application, and I want to use bootstrap without using the CDN method. I have installed bootstrap with npm install bootstrap.
Asked
Active
Viewed 2.2k times
4
-
Have you followed this? https://stackoverflow.com/a/50215970/4813913 – m4n0 Oct 31 '18 at 02:43
-
@ManojKumar yes i have its giving this error after adding import "bootstrap" ./src/theme/variables.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/theme/variables.scss) Module build failed: undefined ^ Media query expression must begin with '(' in C:\Users\src\theme\variables.scss (line 6, column 1) – tnyamuz Oct 31 '18 at 08:26
4 Answers
22
With Ionic 4, this can be done easily by making use of the angular.json file
open the angular.json file, this can be located at the root of your project
locate the the styles array, add the path to the downloaded bootstrap file
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "node_modules/bootstrap/dist/css/bootstrap.min.css"
}
],
if you wish to make use of bootstrap scripts, add the bootstrap script to the scripts array as well.
Please note: for you to make use of bootstrap scripts, jquery and popper.js are required to be added to your projects as well
Triple0t
- 444
- 3
- 9
0
- create new folder public/css inside ionic app folder.
- inside public/css paste copy of bootstrap.min.css.
- add "public/css/bootstrap.min.css" string path in angular.json.
*make sure to rebuild your app .>ionic serve
ebnibrahem
- 99
- 1
- 4
-2
Just paste the BootstrapCDN into the header of src/index.html.
Jay
- 658
- 2
- 12
- 20
-
1this will require internet connection on mobile device.. remember ionic is also for mobile apps which not necessary have internet connection. Also OP said without using CDN. – Carlos.V Jun 30 '19 at 00:11
