I am trying to use tailwndo css for a project in laravel and I would like to maintain the nunito font for the whole app but Tailwind has its own font set. Does anybody know how to change it?
Connect the font to the project (as you usually do) and just add your font to tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
'serif': ['Georgia', 'Cambria', ...],
'mono': ['SFMono-Regular', 'Menlo', ...],
'your-font': ['Your Font', ...]
}
}
}
https://tailwindcss.com/docs/font-family/#app
tailwind.config.js :
theme: {
extend: {
fontFamily: {
body: ['Rowdies']
}
}
},
css\app.css
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#300&display=swap');
shell:
npm run dev
or
npm run watch
now you can use .font-body class in any tag that you want
for example:
<body class="font-body">
<h1>Hello World!</h1>
</body>
font + body = font-body
fontFamily: {
body: ['Open Sans']
}
(you can change body)
Related
How can i change the global color attribute in Vuetify dark theme?
Like e.g.
html, body {
color: red
}
I try to set it via variables.scss but i cant find the appropriate variable name.
Is there a variable for this or how am i supposed to change the color?
There are a few ways. If you'd like to use variables.scss you need to enable treeshaking in nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true, // add this line
},
Otherwise if you'd like to define your own colour you'd do it in the same configuration object as well. Then you can then use anywhere in your vue template.
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
themes: {
light: {
myawesomecolour: '#D78480', //#RRGGBB or from the colors packages
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
Or in layouts/default.vue insert a style tag and put in your custom css
<style>
html, body {
color: red;
}
</style>
I'm trying to use scss in svelte 3, i've done the steps placed in this post:
scss guide in svelte 3
but i keep receiving a syntax error
"Colon is expectedsvelte(css-syntax-error)"
in code like this:
<style type="text/scss">
#container {
display: flex;
/*error in the div below*/
div {
background: red;
}
}
i've prettier setup too, but i don't think it's related
Node-sass is now deprecated, so above still applies but can just be
npm install svelte-preprocess sass --save-dev instead :)
To add support for scss, you'll need add a pre-processor like svelte-preprocess
npm install svelte-preprocess node-sass --save-dev
In rollup.config.js:
import sveltePreprocess from 'svelte-preprocess';
and then under
plugins: [
svelte({
...,
preprocess: sveltePreprocess()
}),
and restart the server.
To enables scss support in vscode create a svelte.config.js file:
const sveltePreprocess = require('svelte-preprocess')
module.exports = {
preprocess: sveltePreprocess(),
}
And restart vscode
When you are using svelte-kit to create your svelte application, you don't need to change then svelte.config.js because it is already set up and it looks as follows:
import adapter from '#sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** #type {import('#sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter()
}
};
export default config;
All you have to do is to install sass using your package manager as follows:
yarn add -D sass
# or using npm
npm i --save-dev sass
And boom!! you will be able to style your components using sass or scss by just changing the attribute value for lang to either sass or scss
using scss
<div class="app">
<div class="app__bin">
<h1>Hello world</h1>
</div>
</div>
<style lang="scss">
.app {
.app__bin {
h1 {
color: red;
}
}
}
</style>
Using sass
<style lang="sass">
.app
.app__bin
h1
color: red
</style>
Happy hacking with svelte!!
As in question. I use Vue, Vuex(Nuxt) and we also share all mixins and sass variables using:
#nuxtjs/style-resources": "^1.0.0"
Which is newer version of "nuxt-sass-resources-loader": "^2.0.5"
I know that there i spossibility with Webpack such as here
So my question is - is it posiibile to do it in similar way and how to configure it? What should I have installed and how can I add it to my nuxt.config.js?
EDIT:
I also found that article but for me it is not working.
Short answer: yes.
SASS offers the option to export variables, which you can import as module and use like any other object. Webpack with sass-loader and node-sass handles the imports.
Example:
// in assets/scss/variables.scss
$white-color: #fcf5ed;
// the :export directive is the magic sauce for webpack
:export {
whitecolor: #{$white-color};
}
// in store.js
import Styles from '~/assets/scss/variables.scss'
export const state = () => ({
styles: {...Styles}
})
// in component
...
computed: {
styles() {
return this.$store.state.styles;
}
}
Longer answer: You can also just use css variables for everything.
E.g.
// in assets/scss/variables.scss
$white-color: #fcf5ed;
:root {
--whitecolor: #{$white-color};
}
// in component
...
mounted() {
this.$el.style.color = 'var(--whitecolor)';
}
<style>
.component {
color: var(--whitecolor);
}
</style>
I'm using ion-img in my ionic2 application to load my pictures correctly. However, I wonder if there is a way to indicate to the user that the picture is actually loading.
Thank you for your help!
EDIT : Here is the answer if you absolutely need to use the ion-img tag. If not, you should use ionic-image-loader as AdminDev826 suggested.
I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".
Here is my solution :
<ion-img [src]="img.src"></ion-img>
<ion-spinner></ion-spinner>
And my CSS :
.img-loaded + ion-spinner {
display:none;
}
I hope it can help someone!
I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".
Here is my solution :
<ion-img [src]="img.src"></ion-img>
<ion-spinner></ion-spinner>
And my CSS :
.img-loaded + ion-spinner {
display:none;
}
I hope it can help someone!
If you want to use the img tag instead of ion-img here is the solution:
<img src="{{image.src}}" (load)="loaded = true" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded" *ngIf="image_exists" />
<ion-spinner [ngClass]="{'center':true}" *ngIf="!loaded"></ion-spinner>
In your CSS file you should write the following:
.img-loaded + ion-spinner {
display:none;
}
// .center in my case to make the spinner at the center
.center{
margin-left: auto;
margin-right: auto;
display: block;
}
loaded is a boolean variable with false default value you have to define in your component.
Please use ionic-image-loader plugin
Install the NPM Package
npm install --save ionic-image-loader
Install Required Plugins
npm i --save #ionic-native/file
ionic plugin add cordova-plugin-file --save
npm i --save #ionic-native/transfer
ionic plugin add cordova-plugin-file-transfer --save
Import IonicImageLoader module
Add IonicImageLoader.forRoot() in your app's root module
import { IonicImageLoader } from 'ionic-image-loader';
// import the module
#NgModule({
...
imports: [
IonicImageLoader.forRoot()
]
})
export class AppModule {}
Then add IonicImageLoader in your child/shared module(s)
import { IonicImageLoader } from 'ionic-image-loader';
#NgModule({
...
imports: [
IonicImageLoader
]
})
export class SharedModule {}
Your solution is not the best one because the app still downloads all the images, For example in a Facebook like app, You will be downloading all the images from the Feed to your app, This will make everything super slow.
Use this:
https://github.com/NathanWalker/ng2-image-lazy-load
ionic-image-loader not works in ionic4+. You must create a component:
HTML
<ion-spinner name="dots" [hidden]="viewImage" color="primary"></ion-spinner>
<ion-img #image alt=""(ionImgDidLoad)="loadImage()" (ionError)="errorLoad()"></ion-img>
Typescript
#Component({
selector: 'preloader-img',
templateUrl: './preloader-img.component.html',
styles: [`
ion-spinner {
display: block;
margin: auto;
}
`],
})
export class PreloaderImgComponent implements AfterViewInit {
viewImage = false;
#Input() url: string;
#ViewChild('image', { static: false }) imageRef: IonImg;
ngAfterViewInit() {
this.imageRef.src = this.url;
}
loadImage() {
this.viewImage = true;
}
errorLoad() {
this.imageRef.src = '<your_default_img>';
}
}
I am trying to compile bootstrap with Brunch in Phoenix. I have deployed a simple collapse nav to heroku, but the nav button doesn't activate on resize: https://hidden-wildwood-14271.herokuapp.com/test
If you look at the <head> in the source code, you'll see this:
<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">-->
<!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>-->
When these links/scripts are uncommented, this nav bar works just fine (assuming you're doing this from a local/non-https, like heroku in production). Instead I have to use the Brunch-compiled css/app.css and js/app.jsat the top. Those file contain exactly the same code as the referenced files in comments (bootstrap css, jquery/bootstrap js).
I'm also getting this error in the console, and have no idea what it means:
Uncaught Error: Cannot find module 'web/static/js/app' from '/'
Also, this is what my brunch-config looks like (very little difference from default configuration):
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// "js/app.js": /^(web\/static\/js)/,
// "js/vendor.js": /^(web\/static\/vendor)|(deps)/
// }
//
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// "web/static/vendor/js/jquery-2.1.1.js",
// "web/static/vendor/js/bootstrap.min.js"
// ]
// }
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js",
order: {
before: ["web/static/js/app.js"]
}
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
sass: {
options: {
// Use includePaths to allow sass to load files outside your tree
// For example, from node_modules
//includePaths: ['app/css']
}
},
postcss: {
processors: [
require('autoprefixer')(['last 8 versions'])
]
},
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true
}
};