I am trying to use bootstrap js features following the angular-meteor tutorial
In that tutorial(see link) they have integrated bootstrap sass files. But how do I integrate the bootstrap.js file?
I tried using
import { bootstrap } from 'bootstrap';
In the main.ts file, but this is not working(IDE shows cannot resolve file bootstrap).
Surprisingly, my node_modules has the bootstrap package installed(the boostrap.sass gets imported successfully). Here is how my node_modules look like:
So how do I import this bootstrap.js file?
EDIT: Things I further tried are:
import bootstrap from 'bootstrap/dist/js/bootstrap' does not work and gives error "Cannot find module 'bootstrap/dist/js/bootstrap'"
import 'bootstrap/dist/js/bootstrap' works but this demands that tether be added as dependency. I added tether via npm and then added it(import 'tether/dist/js/tether') before above import in main.ts but this too does not solve the problem browser console says:
bootstrap.js:2785 Uncaught Error: Bootstrap tooltips require Tether
(http://github.hubspot.com/tether/)
Related
When I have an error on my code, I see the mimified version of the code in the devtool of the browser.When working with plain js, it was easy to link the src of the js file not mimified, but now I use npm install, package.json, and I dont know how to specify to get the complete source. Especially with highchart and highstock in reactjs react-hichart
Instead of:
import Highcharts from "highcharts/highcharts";
import exporting from "highcharts/modules/exporting";
Use:
import Highcharts from "highcharts/highcharts.src";
import exporting from "highcharts/modules/exporting.src";
I have a custom files like
- bootstrap.css
- bootstrap.js
- owl-carosel.min.css
- owl-carosel.min.js
etc. I want to add them locally from my assets folder inside src to my index.js
I have tried adding them to my index.html but the problem is i have to move my assets folder to public folder.
When i try adding them using import statement it Fails to compile
Error:
Failed to compile
./src/assets/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/font-awesome.min.css)
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/cedex12/Gokul/food-day/src/assets/css'
Can we add them like
Step1:'bootstrap': 'file:/path/to/your/repo'
Step2:npm install
I want to integrate them to my index.js file.
With js you can use the function import() that allow you to import external js file in a js file ;) Just read the doc
try using react-bootstrap framework its build with react components! here a link:https://react-bootstrap.github.io/
I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.
I have a .css file that is hosted online. How can I import it in to my react component?
import mystyles from 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css';
this results in an error
Module not found: Error: Can't resolve 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css' in '/Users/busda001/code/electrode-app/src/client/components'
You have 2 choices to include CSS in your react project,
First, you can put the link in the main HTML project page which has all react project.
Second importing in your file.jsx as you do now, but you nee in this way CSS loader in your server, if you use webpack.config.js
use this link to learn what should you do,
How to include a CSS from bower_components using webpack dev server?
I am trying to import 'angular-ui-bootstrap' in the vendor.ts file.
I keep getting can not resolve angular-ui-bootstrap.
Any suggestions on how to get around this problem.
I want to remove the reference from my index.html and move it to the Vendor.ts file which webpack uses to bundle vendor files.
Thanks