I use Nuxt with vuetify. And I would like to use google fonts. Unfortunately it is not possible to overwrite the default font Roboto with a main.styl file. The goal in the main.stly is to overwrite the vuetify styl. How is that possible that I overwrite everything with my font (also buttons). Thank you very much for your help
nuxt.config.js
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Noto+Serif'
}
css: [
'~/assets/style/app.styl',
'~/assets/style/main.styl'css:],
main.styl
body{
font-family: 'Noto Serif', serif;}
image 01
image 02
Don't know if it is still relevant, but you can try the following:
In your nuxt.config.js:
vuetify: {
customVariables: ['~/assets/variables.styl']
}
And in */assets/variables.styl:
$body-font-family = 'Noto Serif', serif
In nuxt.config.js you can add as follows and it automatically takes from google fonts.
You do not have to specify the font in your scss files. It automatically does that for you.
This way it works for me:
in app.styl, which you specify as entry-point for your styles:
$body-font-family = 'Ubuntu'
#require '~vuetify/src/stylus/main'
In your nuxt.config.js:
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true, // IMPORTANT! Else the default variables won't be overwritten
}
In your assets/variables.scss:
$body-font-family: 'FontName', sans-serif !default;
Linking any documentation is useless because this part of the nuxt documentation is totally ambiguous and misses a lot of things.
Related
I've been pulling my hair for hours trying to figure out how to restyle the default scrollbar in Svelte. I've tried regular HTML styles, tens of external npm packages, and every source I could find, but none of them worked. How can I restyle the default scrollbar in a Svelte website?
I've tried adding the following code to my stylesheet but to no avail:
main::-webkit-scrollbar {
width: 0.25rem
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
color: #93CAED
}
Turns out Dai (from the original post's comments) was correct. I shouldn't have applied the styles on my <main> element. However, I didn't have much of a choice because the styles were to be applied to a .svelte file which only had 3 tags - <script, <style, and <main>. Fortunately, I found a way around this.
By prefixing the ::webkit-scrollbar with :root, which automatically applies the styles in the block provided to the whole document.
Please stop pulling out your hair, it won't help. But the following css would surely help you out to customize the scrollbar in Svelte.
For Webkit(ie. Chrome) browsers
:global(.main::-webkit-scrollbar) {
width: 0.25rem
}
:global(.main::-webkit-scrollbar-track) {
background: #1e1e24;
}
:global(.main::-webkit-scrollbar-thumb) {
color: #93CAED
}
For Gecko(ie. Firefox) browsers
:global(.main){
scrollbar-color: #93CAED #1e1e24;
scrollbar-width: 0.25rem;
}
Assuming, "main" is the class name of the Html element where custom style of scrollbar will be applied.
I've made my custom theme and extended the basic theme using configuration (index.js):
extend: '#vuepress/theme-default'
What I can't accomplish is disabling the plugins and overriding the default styles using (config.js):
module.exports = {
// Disabling plugins we received from parent theme
plugins: {
'#vuepress/active-header-links': false,
'#vuepress/search': false,
'#vuepress/plugin-nprogress': false,
},
...
and (index.styl):
// For example
body
background-color: red !important;
When I run the dev server using the npm run dev or even after I build the website with npm run build, the result is the same. The old theme's plugins and styles stay.
I can even see them when I inspect the fetched CSS files.
I've read the docs but can't understand if this is an issue, or if I got something wrong.
For you to inherit a theme you must to create the file docs/.vuepress/index.js :
// docs/.vuepress/index.js
module.exports = {
extend: '#vuepress/theme-default',
};
If you want to disable plugins, you must to declare the plugin-name with false:
// docs/.vuepress/index.js
module.exports = {
extend: '#vuepress/theme-default',
plugins: [
['#vuepress/active-header-links', false],
['#vuepress/search', false],
['#vuepress/plugin-nprogress', false],
['smooth-scroll', false]
],
};
For more information about this click here
If you want to replace styles, you must to create the file docs/.vuepress/styles/index.styl:
/* docs/.vuepress/styles/index.styl */
body {
background-color: yellow !important;
}
This also applies to others styles files present in default-theme. But you should pay attention to that:
Both the user’s styles/index.styl and the theme’s styles/index.styl are generated into the final CSS file, but the user’s style is generated later and therefore has higher priority.
Click here for more information.
If you have a lot of changes to the default theme, it is worth creating a new theme, because the inheritance is intended for minor corrections.
Good morning, maybe someone knows how to import a font in the default.css file, is it to change the font type that is sent in the emails generated by Markdown? I'm trying it in these two ways but it does not change. Thank you.
Your #font-face url looks like it is not going to work, you cant run php in css file
Change it to :
#font-face {
font-family: galano;
src: url('../fonts/GalanoGrotesqueMedium.otf');
}
This will depend on your folder structure but I am guessing fonts dir is inside the public folder
--Edit--
There is no default way to render mail in 5.4 you can follow this guide https://medium.com/#oscarmwana/preview-your-notification-emails-in-laravel-5-4-f30458d6ce4b
// routes/web.php
$this->get(‘preview-notification’, function () {
$message = (new \App\Notifications\TestNotification())->toMail('test#email.com');
$markdown = new \Illuminate\Mail\Markdown(view(), config(‘mail.markdown’));
return $markdown->render(‘vendor.notifications.email’, $message->toArray());
});
Is it possible to add vuetify to default vuepress theme ?
I just need to add few components to default theme however it would be nice to use the vuetify for handling forms within my components.
I have found a custom vuepress theme which uses a vuetify, however I would prefer to use default vuepress theme.
Another option is to eject the default theme and add the vuetify to it. However I would prefer not to eject the default theme just add vuetify to it.
The previous answer from oscarteg got me most of the way there. Here's what I had to do for the .vuepress/enhanceApp.js file (and yes, if you do not have one go ahead and create it).
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify);
options.vuetify = new Vuetify({})
};
Note that in the new Vuetify({}) passed to options.vuetify you can set your theming.
See https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018
The easiest way would be to use the vuetify CDN. In your config.js add something like
module.exports = {
head: [
['link', { rel: 'stylesheet', href: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vue/dist/vue.js` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js` }],
]
}
Something like that. See https://vuepress.vuejs.org/config/#head
Another way would be to install the vuetify package and add Vuetify to enhanceApp. It would look like this in your .vuepress/enhanceApp.js
import Vuetify from 'vuetify'
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify)
}
See https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration
in html:
<ion-content class="bg-style">
in variables.scss:
.bg-style {
background-color: #f5f0eb;
}
the above codes do not work,but it can work in other tags like <a> <div> and so on,and when I put the style file(.scss,such as test.scss) in the same path as the html file,it can work well also.I do not know if my question is clear,thank you for help.
use app.scss file instead of variables.scss.
app.scss
.bg-style {
background: #f5f0eb;
}
I would recommend you to override the ionic variables
$background-color: #f5f0eb !default;
$background-ios-color: #f5f0eb !default;
$background-md-color: #f5f0eb !default;
Check this url for more details - link
in the app.scss file add a style
.fixed-content{
background-color: #f5f0eb;
}
it will apply to all pages, and you don't have to add a class to every ion-content