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.
Related
In order to style a next js app, do I really have to import styles from "./stylesheet.css" and add class with className={styles.aClassName}?
if so, what if I want to style an element by Id or TagName?
Is there a way to style like a normal react app? ie. import "./stylesheet.css" & className="aClassName".
You can add global stylesheet.
You can also place your stylesheet.css in the public folder and refer to it from any component.
<Head>
<link href="/stylesheet.css" rel="stylesheet" type="text/css" />
</Head>
Then you can use the className="stylename" format anywhere in your component.
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'm trying to use Google's Material Components for Web in my project.
The problem is that when I'm adding the import statement, webpack doesn't output anything but exits with code 3221226505, according to npm.
Here's a snippet of my App.vue:
import 'material-components-web/dist/material-components-web.min.css';
The project's commit tree can be found here, and here's the npm log in case it contains anything interesting.
I hope someone can help me with this issue. If you find anything else unconventional in my repo, please let me know. Thank you!
Turned out I just forgot to define a loader for css files. Even though I'm still wondering why webpack just exits with some error code...
However, here's a part of my updated webpack.config.js.
module.exports.module.rules does now contain this:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
The syntax you are using to import css is wrong, it should be like following in your index.html as is given in the documentation:
<link rel="stylesheet"
href="node_modules/material-components-web/dist/material-components-web.css">
But node_modules will not be accessible as you are using webpack, you can move this file to your static folder and import it like following:
<link rel="stylesheet" href="/static/material-components-web.css" type="text/css">
Following is complete code from documentation:
<!DOCTYPE html>
<html class="mdc-typography">
<head>
<title>Material Components for the web</title>
<link rel="stylesheet" href="/static/material-components-web.css" type="text/css">
</head>
<body>
//HTML where you use material components
<script src="/static/material-components-web.js"></script>
<script>mdc.autoInit()</script>
</body>
</html>
Back with another Polymer question, I have a Polymer/Electron app that I'm trying to style.
I want to create a theme.css that contains a :host block with my entire theme in it that I can then import into my modules stylesheet but I've tried a few different things and tried finding anything in the documentation to no avail.
So far, I have tried in, and outside of the <template> definition:
<link rel="stylesheet" href="./account-list.css"> with an #import
<style>#import 'my-theme.css';</style> just above my <link>
:root instead of :host in my theme.css
But neither seem to work, the theme.css is definitely being requested but has no affect on the module's style.
Is there anyway to have a theme like this for Polymer, I really don't want to have a build step.
There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).
Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.
<!-- shared-styles.html -->
<dom-module id="shared-styles">
<template>
<style>
.red { color: red; }
</style>
</template>
</dom-module>
Then obviously you need to import this file in your page.
<link rel="import" href="shared-styles.html">
Now, there are two scenarios.
If you are using custom-style at the document level, you need to
include the style module you previously defined like this -
<style is="custom-style" include="shared-styles"></style>
If you simply want to include the style module inside one of your
elements, do this -
<dom-module id="my-element">
<style include="shared-styles"></style>
Have a look at this plunker that demonstrates both scenarios.
Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.
Using dom-module concept, and in order to use a external third party I did the next and it is working, but probably is not a Polymer best practice.
Dom module with 3rd party css (third-party-styles.html)
<dom-module id="third-party-styles">
<link rel="stylesheet" href="../bower_components/thirdParty/external.css">
</dom-module>
I created a container (elements.html) where import all needed html modules, and there I registered the third party style module and my module
<link rel="import" href="third-party-styles.html">
<link rel="import" href="my-module.html">
And I added the elements.html in the head of my index.html
<head>
...
<link rel="import" href="elements.html">
<head>
<body>
<my-module></my-module>
</body>
In my Polymer Element (my-module.html)
<link rel="import" href="third-party-styles.html">
<dom-module id="my-module">
<style include="third-party-styles"></style>
<template>
<p class=".thirdPartyClass">Content with third party css rule</p>
</template>
</dom-module>
any feedback?
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