How would one import the 'md' icons locally, similar to how they import the mdi ones in this post:
How to import the mdi icons module inside nuxt.config.js in Nuxt
Either the standard package or the custom repo
https://github.com/jossef/material-design-icons-iconfont
I'm using the nuxt-vuetify plugin.
All my attempts have failed, e.g adding this:
nuxt.config.js
css: ['~/assets/main.css', './node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: {
font: false,
icons: 'md',// this just fetches it from the repo
// icons: {iconfont: 'md'} // this doesn't seem to work for me
enter code here
},
theme: {
dark: false,
themes: {
light: {
primary: '#fec655',
},
}
}
},
I ended up solving it right after I posted it.
In the end, the settings in the original questions are correct.
One simply has to install the 'md' package from the original source or https://www.npmjs.com/package/material-design-icons-iconfont
After that, it's just a matter of changing the global CSS import.
E.g
css: ['./node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
A sidenote is that it seems to be possible to use both 'md' and 'mdi' by installing mdi/js for the treeshaken version & making imports manually.
This way, you can use the default icons for all the components but still add more icons from MDI if needed. Since the 'mdi' bundle is around 330kb while the 'md' one is only around 80kb this saves quite a lot of space.
Related
Vuetify has light and dark mode
And you can easily switch between them .
I want to add third one "blue mode" .
Is it possible ?
And how ??
No, this is NOT natively supported by Vuetify v2.
But you can always use some tricks to achieve your goals.
Source and workarounds:
https://github.com/vuetifyjs/vuetify/issues/10985
Yes it's possible! Using a component framework doesn't stop you creating additional styles.
In Vuetify, you'll probably want to use SCSS variables in order to generate new theme styles. I suggest you to go through all vuetify styles directory and check how it's done for dark and white themes. It's not rocket science but you'll have to dig into vuetify styles directory yourself for sure and find all mixins you want to use, and copy their usages inside your own scss files using your new theme.
Most important parts are:
From Vuetify/src/styles/settings you can copy one of the theme files (_light.scss or _dark.scss) and update the new file with your own style settings.
There is a mixin in vuetify you can use to generate your new styles, check how vuetify does it (Vuetify/src/styles/tools/_theme.sass). You'll have to find all usages of this mixin and copy them into your own scss styles using your new theme.
Also there is 1 more usage of theme variables ($material-dark and $material-light) inside vuetify/src/styles/elements/_headings.sass file. Each theme generates headings styles using heading mixin.
Vuetify Theme Configuration
Add custom theme
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
dark: {
// dark theme
},
customTheme: {
// custom theme
}
},
},
})
Seeing as Vuetify adds around 300-340kb worth of icons when using icons: 'mdi' with the nuxt#vuetify-module, I've found answers indicating that purgeCSS is a good solution to shave off the unnecessary and unused icons.
I initially imported the icons manually from 'mdi/font' but quickly realized this was a very ineffective solution because it forced me to constantly come up with solutions of adding the icons manually to components.
I can't seem to get purgecss to remove the icons though (which is the most important to me).
I installed "#nuxtjs/vuetify": "^1.11.3",
I installed "nuxt-purgecss": "^1.0.0",
I installed "#mdi/font": "^5.9.55",
Looking at this answer I tried to create my settings
why do i see vuetify css in view source?
They also discuss it here:
https://github.com/vuetifyjs/vuetify/issues/7265
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: {
font: {
family: 'Ubuntu',
},
icons: {
iconfont: 'mdi',
},
},
theme: {
dark: false,
themes: {
light: {
primary: '#fec655',
primarytext: '#23263e',
},
}
}
},
purgeCSS: {
enabled: true,
paths: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'./node_modules/vuetify/dist/*.js',
'./node_modules/vuetify/dist/*.css',
'./node_modules/vuetify/src/**/*.ts',
'./node_modules/#mdi/fonts/*',
],
styleExtensions: ['.css'],
// whitelist: ['body', 'html', 'nuxt-progress', ''],
whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
whitelistPatterns: [
/^v-((?!application).)*$/,
/^theme--*/,
/.*-transition/,
/^justify-*/,
/^p*-[0-9]/,
/^m*-[0-9]/,
/^text--*/,
/--text$/,
/^row-*/,
/^col-*/,
/leaflet/,
/marker/
],
whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
extractors: [
{
extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
extensions: ['html', 'vue', 'js']
}
]
},
Yet still, this request is being made with the original size, any ideas? What am I doing wrong here? The fonts clearly are pulled from locally and not the CDN.
Aside from working with PurgeCss, Have you tried using #mdi/js instead of mdi icons ?
This's from dev.materialdesignicons.com guide:
Using the webfont while easy to use is highly discouraged due to performance and overall request size
So you may roll that by switching to #mdi/js pachage:
https://www.npmjs.com/package/#mdi/js
then specify usage in vuetify options in nuxt.config.js
icons: {
iconfont: 'mdiSvg',
}
Now you have saved considerably in the bundle size.
I'm using Nuxt with Vuetify.
I created a class and assigned it some padding.
The class is defined in a unscoped <style> in layouts/default.vue.
when I'm on development mode (npm run dev) everything looks great as I aimed for.
the class is on container element so the final html looks like
<div class="container container--fluid my-class">
the devtools look like that when I'm on dev mode:
so my-class is applied. But once I build the project (npm run generate) my-class is overridden by the container class rules:
I guess it is happening because of the order in which the classes combined into a single css but not sure it behaves differently for dev and built projects.
How can I fix it?
After some more digging it seems to be a known issue with nuxt.
It happens when declaring styles in non-scoped style tag, and using it somewhere else.
I followed these steps: https://stackoverflow.com/a/60925793/9103301
which is basically integrating Vuetify into nuxt manually and not with #nuxt/vuetify.
then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).
a more basic vuetify plugin that worked for me:
import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)
export default (ctx) => {
const vuetify = new Vuetify({
theme: {
dark: false, // From 2.0 You have to select the theme dark or light here
},
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
You'll have to install icons as well, vuetify default is mdi which is installed with npm install #mdi/font -D
managed to fix this by disabling tree shaking for vuetify. Change the following in nuxt.config.js:
buildModules: [
["#nuxtjs/vuetify", { treeShake: false }],
],
I have a React app, attempting for tailwind.macro to work within
emotion notations.
I am using customize-cra to rewire the app, and ${twWHATEVER} is successfully working.
However, it does not seem to inherit the original color themes from
tailwind and I am looking for a solution.
Here is the project:
https://github.com/minagawah/cra-ts-emotion-tailwind-solution
As described in the README, I tried
(1) using babel macro,
and (2) using PostCSS plugins.
I thought it's the backgroundSize problem
as it is discussed in
this issue, but no luck.
Here is how I use the tw macro notation in the app:
# ./src/App.tsx
import styled from '#emotion/styled';
import tw from 'tailwind.macro';
const Button = styled.button`
${tw`mt-4 p-2 text-white bg-red-600`}
`;
And it currently works
because I applied a workaround
for this.
It should apply the default tailwind color themes without the workaround I've applied.
I have been trying to figure out ways, but so far, no luck...
Please, I desperately need a help on this...
EDIT: (2019-09-22)
While I was struggling for bg-red to work, I just found out there's no such thing as bg-red by default... That was something I needed to manually add in tailwind.config.js.
Problem solved.
module.exports = {
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
i had the same issues i fixed by copying the default value from the tailwindcss github in tailwind.config.js.
here is the link to tailwindcss default value
https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L5
I am using a Nuxt.js + Vuetify.js project
Looking at the file assets/style/app.styl we have
// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
#require '~vuetify/src/stylus/settings/_colors'
$theme := {
primary: $blue.darken-2
accent: $blue.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}
// Import Vuetify styling
#require '~vuetify/src/stylus/main'
.page
#extend .fade-transition
The problem is, changing these theme colors does not result in any changes.
Any ideas how to solve this?
Docs not telling how to change color properly...
first of all you need to set your current theme and then config it.
I've waste 4 hours to figure this out. You need to change you config accordingly:
vuetify: {
theme: {
light: true, //you don't actually need this line as it's for default
themes: {
light: {
primary: '#b71c1c',
...
}
}
}
},
While working on this problem I figured out that you also can freely add your colors like this:
vuetify: {
theme: {
themes: {
light: {
'custom-color-one': '#b71c1c',
'custom-color-two': '#3B8070',
...
}
}
}
},
and then in your HTML:
<div class='custom-color-one'>
I'am div with custom background color!
</div>
<div class='custom-color-one--text'>
I'am div with custom text color!
</div>
Not sure, but try this maybe, depends how vuetify is included, but I presume if you used vuetify nuxt template then you need to include it in your nuxt.config.js file.
If you included vuetify like so:
modules: [
'#nuxtjs/vuetify'
Then add theme like so:
module.exports = {
modules: [
'#nuxtjs/vuetify'
// ...
]
// Add the following:
vuetify: {
theme: {
secondary: '#ff0000'
// ...
}
},
NOTE: This solution isn't the best approach, and will not work in a production environment. It works for workflows where a static site is deployed (i.e. when you run yarn build and deploy that), since changes in node_modules aren't persistent across installs.
Two files govern this - nuxt.config.js and node_modules/vuetify/es5/colors.js.
You need to open nuxt.config.js, and head over to the vuetify property. The themes property under the vuetify: {...} section lets you map the class names to configured color variables.
Further, to change the values of the colour variables, modify the file node_modules/vuetify/es5/colors.js. Here, you define any colors you need to whatever hex color code you want.