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">
Related
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
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 would like to integrate Bulma into my Vue.js project.
I have previously included included the CDN script tag into my <head>.
However after that, I followed these official instructions for including Sass pre-processor, as Bulma requires it in a Node project.
npm install sass-loader node-sass --save-dev
<style lang="sass">
/*write sass here */
</style>
Now, the script tag in <head> is being commented out, and I can't figure out how to load Bulma properly into my application.
I have imported Bulma in my root component style tags as suggested by #BillCriswell below, as follows:
<style lang="scss" src="bulma"></style>
<style lang="scss">
body {
text-align:center;
background-color:blue;
}
</style>
And the stylesheet is properly loaded, however if I add another style tag as further suggested, the styles don't load.
How do I load Bulma into my Vue.js project, and what is the recommended approach for integrating a CSS framework into Vue.js?
You should be able to do this since bulba's main entry in package.json points to bulma.sass.
<style lang="sass" src="bulma"></style>
<style>
/* Your css for this file... */
</style>
or you can do
<style lang="sass">
#import "bulma"
/* Your css for this file... */
</style>
There's no need to do import bulma from 'bulma' in your <script>.
If you can't just use the style tag it would depend on your webpack config. If you're using the vue-cli webpack template I believe you should be good.
I have a web page with the following folder structure:
MyWebpage
- css
- layout.css
- img
- wallpaper.jpg
- js
- index.html
I have the following line included in index.html
<link rel="stylesheet" type="text/css" href="css/layout.css">
Now, I want to use the image wallpaper.jpg as the background for the <body> element. How can I use relative referencing here? Should I locate the file relative to the CSS file, like this,
body {
background: url('../img/wallpaper.jpg');
}
or relative to the HTML file, like this?
body {
background: url('img/wallpaper.jpg');
}
It really depends on where you are writing your CSS.
If you are writing an inline style or using <head> <style> tags in the HTML file, then use a path relative to the HTML file (../ in this case), as you are telling browser to load the image from the HTML file.
And if you are writing the style in the CSS file, the style is relative to the CSS file destination (no ../ in this case), as you will load the CSS file from the HTML file and the CSS file will load all the required resources.
Meteor compiles the css files into one css file and inserts it as first child of head element in html.
<head>
<!-- meteor inserts my concatenated css file from client folder here -->
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
</head>
I don't want to create a package for the theme assets I am using. I just want to use them directly in the html like above and I want to develop my css in the client folder with a preprocessor.
How can I get meteor to inject the generated css as last element of head rather than first which is default?
Thanks
EDIT:
To clarify further, I want meteor to inject the compiled css as shown below. I could manipulate the DOM and move that link after DOM is ready but it's a hack. Is there an API to configure this?
<head>
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
<!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>
You can use #import url; declaration on top of your css file.
main.css
#import '/sometheme/theme.css';
body {
}
This will load /public/sometheme/theme.css before your css
Just place your css theme and meteor will concatenate it into existing css. Meteor have a special way with file order:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
To achieve your goal, just make sure you the your css is deeper than the theme folder and be aware with the alphabetical ordering
Edit:
If you want to load file from /public, just place <head></head> in one of html file (e.g.: app.html) and reference your stylesheet there.
app.html:
<head>
<link href="/sometheme/theme.css" rel="stylesheet">
</head>
It will refer /public/sometheme/theme.css