Loading CSS and JS from imports/

#1

Hi everyone,

I am pretty new to development using meteor.

I am using react etc and currently have a page component that is loading up.

My issue is the button inside my page still shows as a normal button and not as a bootstrap one.
I am getting no errors.
I do not want to use an atmosphere package or a npm modules as some other js files I am importing have no corresponding package so I would rather do it all this way as I will have to get this method working once I have the bootstrap issue working. Thanks!

Here is the image of what I see on localhost:

Within the Page.jsx file I have:

import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';

// CSS
import '../../imports/assets/css/bootstrap.min.css';
import '../../imports/assets/css/style.css';
import '../../imports/assets/css/style-responsive.css';
import '../../imports/assets/css/animate.css';
import '../../imports/assets/third/font-awesome/css/font-awesome.min.css';
import '../../imports/assets/third/weather-icon/css/weather-icons.min.css';
import '../../imports/assets/third/morris/morris.css';
import '../../imports/assets/third/nifty-modal/css/component.css';
import '../../imports/assets/third/sortable/sortable-theme-bootstrap.css';
import '../../imports/assets/third/icheck/skins/minimal/grey.css';
import '../../imports/assets/third/select/bootstrap-select.min.css';
import '../../imports/assets/third/summernote/summernote.css';
import '../../imports/assets/third/magnific-popup/magnific-popup.css';
import '../../imports/assets/third/datepicker/css/datepicker.css';


// JS
import '../../imports/assets/js/jquery.min.js';
import '../../imports/assets/js/bootstrap.min.js';
import '../../imports/assets/third/slimscroll/jquery.slimscroll.min.js';
import '../../imports/assets/third/raphael/raphael-min.js';
import '../../imports/assets/third/morris/morris.js';
import '../../imports/assets/third/nifty-modal/js/classie.js';
import '../../imports/assets/third/nifty-modal/js/modalEffects.js';
import '../../imports/assets/third/sortable/sortable.min.js';
import '../../imports/assets/third/select/bootstrap-select.min.js';
import '../../imports/assets/third/summernote/summernote.js';
import '../../imports/assets/third/magnific-popup/jquery.magnific-popup.min.js';
import '../../imports/assets/third/input/bootstrap.file-input.js';
import '../../imports/assets/third/datepicker/js/bootstrap-datepicker.js';
import '../../imports/assets/third/icheck/icheck.min.js';
import '../../imports/assets/third/wizard/jquery.snippet.js';
import '../../imports/assets/third/wizard/jquery.easyWizard.js';
import '../../imports/assets/third/wizard/scripts.js';
import '../../imports/assets/js/lanceng.js';


export default class Page extends React.Component{

	constructor(){
	    super();	
    }
    
    
    
    render(){		
		return (  
                 // start page
                 // BEGIN PAGE -->
                 <div class="container">
                    <button type="button" class="btn btn-default">Default</button>
                 </div>
              ) 
    }
}
#2

try to create css and js folders in your client folder, then put css files in css folder and js file in js folder. And remove all imports in your page class.

#3

I had tried this originally but ran into issues regarding the load order of the files so went with this way instead…

#5

try to create a index.html in your root folder and and links and scripts in order,

#6

Had already tried that and it gives the same result.

#7

I therefore do not see how you account walking away from the atmosphere of bootstrap packages. try to add the bootstrap package with “meteor add twbs: bootstrap” and jquery with “meteor add jquery” and then you include your custom links and scripts. I think it should solve the problem, so to say the least

#8

I had tried this already using the atmosphere package:
mizzao:bootstrap-3

However it still just shows the default button.
Do I need to import something from the boostrap package on the Page.jsx?

#9

when you use a react file (jsx) instead of putting class food rather className, like this className=“btn btn-block btn-primary”

#10

Thank you that worked!

#11

You’re welcome:sunglasses: you can learn more about react to this link: https://facebook.github.io/react/docs/getting-started.html

#12

Just one last question if you don’t mind.
For CSS what would be the best way to add them:

Using script tags in the index.html or in the Page.jsx
an import line in index or Page.jsx
or just adding them to the public folder

Thank you

#13

for me, I created a folder in my client css directory and I included all css files of my app, so I do not need to make import anyway, meteor handles it automatically.

#14

it works for you too?

#15

I just went with keeping them in the public/assets folder and loading them in from the index page.
Makes it easier for me to organize in my head! thanks