why angular-material css file didn't load until you refresh page? - javascript

I am using angular 1.6 with Webpack, I have a angular-material.css as stylesheet, and also I have edit-app.html should use this angular-material.css.
If I go from my homepage -> edit-app.html, the angular-material.css didn't get loaded, until I hit the refresh page button on my browser.
So I am researching how did the webpack load the css files, I do check that in the webpack.config.js, however, mine is different:
import makeWebpackConfig from 'angular-portal-dependencies/src/webpack/make-webpack-config.js';
export default makeWebpackConfig(__dirname, {});
How to solve this issue, let the angular-material.css file loaded, when the project init, or manually add that css file to the edit-app.html page.

Related

Can't load styles with longer link with Laravel (blade.php)

I am building a web page and i have a problem about the page. In the 'routes', I created a custom link:
Route::get('/customization/footer', 'Controller#footer');
So, the page will be loaded using https://myweb.com/customization/footer. But, using that link, the page didn't load the style (css and js). And then, when I changed the link on 'routes' becoming:
Route::get('/footer', 'Controller#footer');
the page loaded perfectly (no problem found).
The reason I used a longer link is to make it tidier. Does anyone know about how to solve this problem? I need help šŸ™
P.S.: The problem is not in how the style files (like css and js files) are called. The problem is in the link I used as I stated in my question

You havent shown how to include styles on your page.
The best way to connect styles is via a helper asset()
<link href = "{{asset('css/app.css')}}" rel = "stylesheet">
(for path /public/css/app.css)

Can I add react app to app.html and not to index.html

Assume I already have a static web page index.html with its content.
Now after building a React app, I want to create an href link to /app.html where I would put <div id="root"></div> tag, so only when the user navigates to the app page, the React app will be rendered.
How can I set that?
What I did try is basically as presented above: the react app Pablic directory contains an index.html with static content, and inside an href to app.html with a div tag with id="root".
But I get this error:
Target container is not a DOM element.

Maybe you can use CDN rather than create-react-app. Then you can add at any HTML file you want. Of course, this will lose some benefits from CRA.
https://reactjs.org/docs/cdn-links.html

React production build styling not loading on refresh

I have a single page React website. Everything works fine in development mode. When I build it and run from the build folder, I encounter this one error:
If I visit any page, everything loads fine. However when I refresh the page, the styling doesn't get applied to certain aspects of the page.
Here is an example view file:
// Dependencies
import React from 'react';
...
// Style
import '../Styles/Landing.css';
...
// Images
import image from '../Images/landing/image.jpg';
// View
export default () => (
<div className="landing-page">
...
</div>
);
I'm new to React, and re-working an existing site, learning as I go. Is there a reason why the styling bugs out on refresh?
Any help would be deeply appreciated!

React-Bootstrap and Bootstrap-sass modal.scss not loading

I have a react application, which uses react-bootstrap + bootstrap-sass.
IĀ“m loading the bootstrap.scss file in my main app.scss like this:
#import '~bootstrap-sass/assets/stylesheets/_bootstrap';
In my page, I implemented a simple Component from React-Bootstrap.
But the modal window has no CSS whatsoever, so it looks really bad.
IĀ“ve tried to load the modal.scss directly
#import '~bootstrap-sass/assets/stylesheets/bootstrap/_modals';
But still no styles are applied.
(the modal appears and hides as expected though).
Bootstrap scss is loaded though, as the styles on buttons, dropdowns, etc is present.

You you need to import the compiled CSS into the component JSX files that it applies to.

Applying a dependency with javascript to Angular 2 such as bootstrap, foundation or jquery

creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.

You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).

Categories