i am using react and had all of my pages import index.css (because i called it from index.html).
After i added /:id parameter to the url of pages it suddenly stopped getting the style from the index.css but does take it from other css files that are imported directly to the page in react.
The route looks like this now:
<PrivateRoute path="/:id/whatsapper" component={Whatsapper} isAuthenticated={isAuthenticated} />
and before looked like:
<PrivateRoute path="/whatsapper" component={Whatsapper} isAuthenticated={isAuthenticated} />
Was anyone facing this issue?
Why is is happenning?
I found the issue,
i imported the css like :
<link rel="stylesheet" href="./index.css" />
instead of :
<link rel="stylesheet" href="/index.css" />
Related
I am using Laravel 6 and want to change the structure of some of my routes in the web.php file. When registering the following route like this:
Route::view('/my-article', 'articles.my-article')->name('my-article');
everything works as it should.
But when changing the URL like this, adding /articles:
Route::view('/articles/my-article', 'articles.my-article')->name('my-article');
Suddenly no CSS is applied anymore. No Bootstrap, Fontawesome or own stylesheet. JS script on the other hand, and HTML of course, were loaded.
Oddly (for me): The other routes worked fine, all CSS stylesheets loaded.
I tried the same with another route that had a Controller action. I changed it from
Route::get('/{continent}', 'ContinentController#index')->name('continent');
to (adding /continents)
Route::get('/continents/{continent}', 'ContinentController#index')->name('continent');
And again, no styles were applied. Only JS scripts and HTML.
Why is that so? Why can't I add something to the URL by hand and why does it affect the loading of the CSS stylesheets?
Thanks and best regards.
EDIT:
Here is the part of my template.blade.php file where the styles are included:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Own CSS -->
<link rel="stylesheet" href="css/style.css?{{ time() }}">
I am using turbo table for displaying data. But I am not getting borders for table. I installed PrimeNG from CLI and imported themes in styles section in angular-cli.json.
You will need to make sure the following is present :
In your index.html file the following link references:
<link rel="stylesheet" type="text/html" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/html" href="/node_modules/primeng/resources/themes/redmond/theme.css" />
<link rel="stylesheet" type="text/html" href="/node_modules/primeng/resources/primeng.min.css" />
Then make sure the styles.css has the right theme import e.g:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
Also make sure in your package.json the dependencies is there:
"primeicons": "^1.0.0-beta.6",
"primeng": "^6.0.0-beta.1"
I'm currently working on an email template with thymeleaf in a jhipster application.
My problem is that i can't use bootstrap css in thymeleaf template.
I understand that thymeleaf is a server-side technology and cannot load bootstrap css that exists on client-side (via node_modules), but when i saw answers to these two questions question1 and question2 i tried by similarty to import my css like this
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/vendor.css|}" />
but thymleaf still can't load this two files, i have no errors on console but css classes (bootstrap and mine) are just ignored.
PS : global.css contains my css classes, and vendor.css is the default jhipster file that calls bootstrap
vendor.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~font-awesome/css/font-awesome.css';
My template is located under
/src/main/resources/mails/applicationReport.html
My css is located under
/src/main/webapp/content/css/vendor.css
/src/main/webapp/content/css/global.css
So how can i use css classes from global.css and vendor.css in thymleaf?
UPDATE
After Gaël Marziou's answser i added these two lines to /demain/webpack/webpack.common.js
{ from: './src/main/webapp/content/css/global.css', to: 'global.css' },
{ from: './src/main/webapp/content/css/vendor.css', to: 'vendor.css' },
and in /src/main/resources/mails/applicationReport.html i call these two files like that
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/vendor.css|}" />
but Thymleaf stills ignore my css classes
Your CSS files are bundled by webpack, so content/css/global.css does not exist in your built webapp and cannot be accessed by URL, check it by unzipping your war file.
However, you could have both bundled stylesheets and original css files in your war file by adding these files to the configuration of CopyWebpackPlugin see in webpack-common.js file.
I have a Vue app with many components. Currently I have Font-Awesome included in the head of the index.html file however only ONE page, or component, actually needs it. Is it possible to move it to the component itself so that it only loads when it's needed?
MOVE THIS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
TO THIS
<template></template>
<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome-min.css"></link>
<script>
export default {
name: 'SingleComponent',
data: function() {
return{}
}
}
</script>
<style scoped>
</style>
I've tried downloading Font-Awesome and adding a link tag in the component like above ^^^^ I don't get any errors but the icons still don't work.
Import css file in style tag of App.js
<style>
#import './static/css/style.css';
</style>
If you have just one page or component, isn't it easier to create what you need in a <template /> and <html /> tag?
Instead of trying to include Font-Awesome directly in the component, I discovered there is already a Vue wrapper for it called vue-awesome so I used that.
I'm using html5reset from http://html5reset.org for the first time. The issue I'm seeing is that the file core.css is being loaded twice or something. If you pull up firebug, you can see that for every element you click on there is a core.css and a core.css #2.
I can't figure out what is causing it to load twice. My site is http://ratemymechanic.us
I have found this in your HTML markup:
<link rel="stylesheet" href="http://ratemymechanic.us/assets/css/main.css" />
<link rel="stylesheet" href="http://ratemymechanic.us/assets/css/core.css" />
in main.css, you're importing core.css too, hence you're applying it twice:
#import url("core.css");