I'm using Vuetify with Nuxt.js and I have chunked out my css files so that when I use npm run generate all my my styles aren't included in every page on my site. To acheive doing this, iv'e added....
build: {
extractCSS: true,
splitChunks: {
layouts: true
}
}
However my vuetify-theme-stylesheet theme files are still being included on every page. How can I get my vuetify-theme-stylesheetfiles to be chunked like the rest of my CSS?
<style data-n-head="vuetify" type="text/css" id="vuetify-theme-stylesheet" nonce="undefined">.v-application a{color:#0769ba}.v-application .primary{background-color:#0769ba!important;border-color:#0769ba!important}.v-application .primary--text{color:#0769ba!important;caret-color:#0769ba!important}
After you've extracted the contents of the <style> tag in the head to a css file, you need to adjust certain fields in your config.
In your nuxt.config.js, you need to set the theme to disabled and link the extracted vuetify css.
export default {
css: [
'./assets/vuetify.css' // the extracted vuetify css
],
vuetify: {
theme: {
disable: true
}
}
}
Now keep in mind that if you want to modify your theme (colours, etc.), you'll need to make these changes in your new css file (assets/vuetify.css)
This will also avoid a slight delay in the full css load, prevent a switch in display
Related
I have a VueJS setup with Vite, Tailwind CSS and postcss, and would like to define different colors using variables in a .env.name file so that I can apply different color themes depending where the code is deployed.
I tried with a .env file containing
VITE_COLOR="FF0000"
and an import within the tailwind.config.js
...
theme: {
colors: {
primary: import.meta.env.COLOR
}
}
...
However, I get the following error:
SyntaxError: Cannot use 'import.meta' outside a module
What do I have to change to get this to work or is there an even better method?
Tailwind config is CommonJS file (not module) so you cannot use ES6 features like import
You can install package called dotenv
npm i dotenv
Require it on top of your tailwind config file like
require('dotenv').config()
module.exports = {/** */}
create color variable in .env. Note as we require it out of Vite's scope it may not be prefixed with VITE_
ANY_COLOR='#ffc8dd'
Now you can access it in tailwind config
theme: {
colors: {
primary: process.env.ANY_COLOR
}
}
This will work BUT if you change color in .env file you need to rebuild your styles again. If it is OK for you (one deployment - one color anyway) - fine. I personally would suggest another solution based on CSS variables - link to CanIUse
Define variable in CSS file or create style tag within <head> tag in index.html
:root {
--theme-color: #ffc8dd;
}
and in config
theme: {
colors: {
primary: 'var(--theme-color)'
}
}
And that's it - no extra packages, extra work and if you change CSS variable, changes will be applied on the fly - even in production as we are using CSS functionality
I am working on a Vue + Nuxt + Tailwind project and using the marked library to convert a text into markdown.
The issue is that some styles like "Headings" and "Link" are loading properly, while some basic styles like "bold", "italics" are working fine.
For example:
When I use "*hello* world", it gets converted to "hello world".
When I use "# hello world", it does not increase the size of the text.
When I use "[google](https://google.com)", it does create a link, but the link is not blue colored.
Not sure what the issue is here. If any more details are required, please let me know.
Its because of the tailwind.css
in tailwind, h1 - h6 headers dont work.
Option 1)
add this to your tailwind.config.js:
module.exports = {
corePlugins: {
preflight: false,
},
....
}
source :https://github.com/tailwindlabs/tailwindcss/issues/1460
Option 2)Try adding custom css for h1..h6 in your css file.
https://www.w3schools.com/tags/tag_hn.asp copy the styles from here
Similarly try add custom css for other issues.
The solution to this was using Tailwind CSS's typography plugin.
Here are the steps to be followed:
Install the plugin first.
Using npm
npm install #tailwindcss/typography
Using Yarn
yarn add #tailwindcss/typography.
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
Then add the prose class to the element where you are displaying the markdown.
<div class="prose" v-html="cleanedMarkdown"></div>.
This provided the needed formatting for the markdown.
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'm using Vuetify in my project, and I want to use a variable file to override the styles generated by Vuetify.
I'm loading the components and their corresponding styles using the a-la-carte method, so I'm NOT importing the Vuetify SASS file using this:
#import '~vuetify/src/styles/styles.sass'
// Not using this method because I don't want to generate styles that are not being used by
// vuetify components I'm not using
Also, my project is using *.scss, not *.sass.
I'm also injecting a global SCSS file containing mixins and other variables in my vue.config.js:
css: {
sourceMap: productionSourceMap,
loaderOptions: {
scss: {
prependData: `#import '#/scss/_common.scss';`
}
}
},
I included a Vuetify variable, $border-radius-root, in that common.scss file, but it doesn't seem to have any effect.
Any idea how to do what I want without having to write entirely new CSS rules to override Vuetify's generated stylesheet? Basically I want to change the units that Vuetify uses using their own stylesheet generator.
Actually the solution is, and I'm dumb for not thinking of this before, to add another loader to vue.config.js:
css: {
sourceMap: productionSourceMap,
loaderOptions: {
scss: {
prependData: `#import '#/scss/_common.scss';`
},
sass: {
prependData: `#import '#/sass/_vuetify-variables.sass';`
}
}
},
Since vuetify is using sass as the css pre-processor, it needs sass-loader to handle the variable overrides and apply it to the framework.
If you are using Nuxt:
you can add customVariable path in your nuxt.config.js file, in vuetify object
Note you have to enable treeShake. This option is required for custom SASS variables to work
example:
vuetify: {
// usually file should be in assets folder
customVariables: ['~/path/to/variables.scss'],
treeShake: true,
}
If you are using Vue CLI:
Create a folder with name: sass, scss, or styles
Create new file inside this folder and name it: variables.scss or variables.sass
vuetify-loader will automatically bootstrap your variables into Vue CLI’s compilation process, overwriting the framework defaults.
From Vuetify docs:
If you have not installed Vuetify, check out the quick-start guide. Once installed, create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass. The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.
So, the vuetify-loader automatically loads #/scss/variables.scss in a Vue CLI project, so you could set $border-radius-root in that file, and it will overrride the framework default.
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.