I am new to Angular. I tried to add the angular-font-awesome module as described.
https://www.npmjs.com/package/angular-font-awesome
But it is not displaying the icon. If I use the cdn in my index the icons display perfectly fine (but I gues that's not the way to go..). I am using scss, so i changed this in the cli: (My styles.scss styles display also fine)
I also tried the path ../node_modules - not working.
"styles": [
"sass/styles.scss",
"./node_modules/font-awesome/scss/font-awesome.scss"
],
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
AngularFontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<a class="icon"><fa name="cog"></fa></a>
Try adding a direct css link in index.html. See this post for additional details.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
Question is why it doesn't work by providing link in angular.json? In my case bootstrap works fine. Only for font awesome I have to add link into index.html to work icons properly.
Source:
https://stackblitz.com/edit/angular-reciptor?file=src%2Findex.html
Related
I have two layouts inside layouts folder: default.vue and projects.vue. The content of the layouts is not relevant.
The thing is I'm trying to apply layout transitions between two pages index.vue and about.vue using the default layout.
I am following the documentation: I have created an app.vue file with the following code:
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<style>
.layout-enter-active,
.layout-leave-active {
transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
filter: grayscale(1);
}
</style>
and then I added the property to my nuxt.config.ts file, like this:
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' }
},
})
But it doesn't work. I have also tried with the property pageTransition instead layoutTransition and it works (don't know why).
It seems that the CSS classes for the layout are not applied if I inspect the code. I have also tried to add the classes inside the tailwind.css file with no result.
I had the same issue.
I created a main.css in /assets/css and added this to nuxt.config.ts
css: [
'#/assets/css/main.css',
],
In main.css I added the CSS transitions as you have above.
I am trying to link my css files by using head property of nuxt in only one specific page like this:
head: {
link: [
{rel: 'stylesheet', href: require('~/assets/css/font.css')},
{rel: 'stylesheet', href: require('~/assets/css/style.css')},
]
}
After doing this when I load my page Everything is fine but I see this Error at Console
GET http://localhost:3000/[object%20Object] net::ERR_ABORTED 404 (Not Found)
and when I looked at source I saw that CSS Files were linked this way :
<link data-n-head="ssr" rel="stylesheet" href="[object Object]">
<link data-n-head="ssr" rel="stylesheet" href="[object Object]">
I need to import my CSS filed this way but I still have this problem, How can I solve this ?
If you want to call an asset in the head property you have to add/move it to the /static folder, which is publicly accessible, and then refer to it explicitly. This method doesn't minify the file(s).
head: {
link: [
{rel: 'stylesheet', type: 'text/css', href: '/css/font.css'},
{rel: 'stylesheet', type: 'text/css', href: '/css/style.css'}
]
}
Alternatively, you can leave it where it is and import it via #import between the <style> tags of the .vue file, without the initial forward slash.
<style scoped>
#import url('~assets/css/font.css');
#import url('~assets/css/style.css');
</style>
Source01 | Source02
I am using Razorpay for my payment service. Other than the checkout page, no page is using it. I have included it in nuxt.config.js file. Is it possible in nuxtjs to use a script only where you might need it? not in all pages. (My lighthouse score is degrading due to this)
Yes, it is possible. You can use the Local Settings to include your resources in your .vue file inside the pages/ directory (here in the head function):
<template>
<h1>About page with jQuery and Roboto font</h1>
</template>
<script>
export default {
head () {
return {
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
]
}
}
}
</script>
<style scoped>
h1 {
font-family: Roboto, sans-serif;
}
</style>
Here, this jQuery js file and Roboto font css will only be included in this page, instead of all the pages.
I'm COMPLETLY LOST about including Google Fonts into my project.
I've installed google-fonts-webpack-plugin and tried to configure it properly, but the html is not being injected. Or maybe I'm not thinking about it right. Regardless, how to I include Google Webfonts?
Code in my vue.config.js:
const GoogleFontsPlugin = require("google-fonts-webpack-plugin")
module.exports = {
configureWebpack: {
plugins: [
new google-fonts-webpack-plugin({
fonts: [
{ family: "IBM Plex Sans" }
]
})
]
}
}
Go to the end of app.vue and add below code:
<style lang="scss">
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
</style>
That plugin is not currently compatible with the version of Webpack used by vue-cli.
What I've usually done in the past is just include the fonts via <link> tags in the index.html file, eg
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue</title>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
You could also edit the <style> block in your App.vue component to include
#import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans");
I'm trying to import element UI into Nuxt.js and on their twitter account they linked to glitch (https://glitch.com/edit/#!/nuxt-element-ui?path=layouts/default.vue:1:0) that has the important files listed. In the default.vue you it has this listed
<template>
<div>
<nuxt/>
</div>
</template>
<style src="element-ui/lib/theme-default/index.css"></style>
I imported element ui into my nuxt project by running:
npm i element-ui --save nuxt
searched for index.css in the folder and copy-pasted that link as a source to the style src (node_modules\element-ui\lib\theme-chalk\index.css) for the default.vue file but I am getting an error that it can not locate it.
I also tried to use the cdn style file from element ui's website:
https://unpkg.com/element-ui/lib/theme-chalk/index.css
Both of them are resulting in "Module not found"
What am I doing wrong? Any other place that has anything listed on how to import element ui into nuxt?
Global CSS should be defined in css section of nuxt.config
e.g.
module.exports = {
css: [
{ src: '~/assets/index.css', lang: 'scss' },
],
｝
and CDN stylesheet should be defined in head.links
head: {
link: [
{ rel: 'stylesheet', href: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' },
],
},
Read:
https://nuxtjs.org/api/configuration-css
https://nuxtjs.org/api/configuration-head
Inside your style, you can import it like this:
<style>
#import '~element-ui/lib/theme-default/index.css'
</style>
But you can also import it directly from your javascript:
import 'element-ui/lib/theme-default/index.css';