I want to use an external .css file but It does not work. I have tried link rel="stylesheet" and #importing css in style tags but it does not work
for importing css file to your nuxt app open yout nuxt.config.js file and in css section add your css files like: css: ['~layouts/global.css'] – Ali Hosseini
Related
Hopefully this is a newbie question.
I am working on integrating vuetify into an existing vuejs web SPA application in a few screens. The application uses purpose ui for it's css and styling. After integrating vuetify into the application we see that the site now has the style of vuetify.
How can I ensure that vuetify's styling is only restricted to the specific vuetify controls on the few screens, that those controls are used on?
Update 1:
index.js
if (Meteor.isClient)
{
import 'vuetify/dist/vuetify.min.css';
}
index.html: meteor-bundled-css line below should include the vuetify.min.css in the bundled css file but I don't see the css constructs in the bundled file, though the website is now a material ui\Vuetify website now.
<head>
<link type="text/css" href="/css/purpose.css" rel="stylesheet">
<meteor-bundled-css />
</head>
I was able to workaround this issue by removing Vuetify and adding BootstrapVue in the project, wrt to the BootstrapVue, Bootstrap css files, instead of adding the css files in the index.js file, I added the same to the client folder so it could be bundled\minified by Meteorjs itself.
I was trying to use font awesome css in my project but the css doesn't get applied to HTML elements.
If i remove Angular Material theme then only the Font Awesome CSS is working. But then Angular Material Components will not work!!!
#import "~font-awesome/css/font-awesome.css";
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
Any guidance for this -
In angular.json, we have styles property which will allow to load third party css files.
"styles": [
"node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"font-awesome/css/font-awesome.css"
],
One of the easiest ways is to import the CSS at the global level in the index.html in src folder.
You can do this with a simple <link rel=“stylesheet” href=“/fontawesome.css
That should hopefully fix issue
I have a React app created using create-react-app which links to my CSS file as shown below in index.html file:
<link rel="stylesheet" href="../src/site.css"></link>
The site.css is implemented below:
body {
background-color: green;
height:100%;
width:100%;
}
When my app is run it does not apply styles to the body. I can see the css file is being downloaded.
The src directory is not served with create-react-app. You either need to move your CSS file to the public directory or import it from one of your JavaScript files.
Internally everything is bundled using Webpack with loaders that understand stylesheets, so the simplest way to handle this is to remove the link tag from your public/index.html file and instead add the following import to your src/index.js file:
import "./site.css";
Alternatively, if you really need to link to the stylesheet from your html file, you can move it to public/site.css and change your link tag to reference it:
<link rel="stylesheet" href="/site.css">
I create Webapp application using yeoman, Which includes sass.
In the index.html file I don't see link to the bootstrap css files.
I run it with grunt.
I am wondering, where are the bootstrap css files, and how does the browser recognize them?
I realize that bootstrap style has been added to the main.css file.
I'm diving into Bootstrap, and I'm beginning with the simplest example possible. In my HTML file there's only one line regarding style sheet:
<link href="css/bootstrap.css" rel="stylesheet">
In the css folder I've deleted all other css files (minified and css map) except bootstrap.css and bootstrap-theme.css - and now the HTML file lookes screwed up.
But when I copy back the minified css in the directory, the HTML renders fine - despite no link to it in the HTML. How is that possible?
You may have some #import statements in the stylesheet you are declaring in your HTML. That means that your stylesheet makes use of another stylesheet.