Using the Nuxt create-nuxt-app (https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-)
I selected Vuetify as my UI. (nuxt ^2 && Vuetify ^2)
Vuetify has a default background color of a shade of grey.
I just wanted to change that to white.
Easier said then done.
// nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
// my other color changes...
themes: {
light: {
primary: '#3EA0E1', // a color that is not in the default material colors palette
accent: '#82B1FF',
secondary: '#E7E7DE',
info: '#1976D2',
error: "#FF5252",
success: "#4CAF50",
warning: "#FFC107",
}
}
}
}
in variables.scss
// /assets/variables.scss
#import '~vuetify/src/styles/styles.sass';
// change background to white..
$material-light: map-merge($material-light, ( background: '#fff'));
Now when running : npm run dev it does not add the customVariables, apparently only in production.
On https://github.com/nuxt-community/vuetify-module#treeShake it is clearly stated that it only will work in production.
So how do I develop my app with a background of white as example?
I remember in previous versions ( 1.5) still using stylus , that this was not a problem.
I am fine if it does not "treeshake" the components in dev mode, but at least include my custom scss.
Anyone a clean workaround?
If you want to use tree shaking in dev mode, explicitly add treeShake option to the vuetify option.
In your nuxt.config.js file,
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
theme: {
themes: {
light: {
primary: '#3EA0E1', // a color that is not in the default material colors palette
accent: '#82B1FF',
secondary: '#E7E7DE',
info: '#1976D2',
error: "#FF5252",
success: "#4CAF50",
warning: "#FFC107",
}
}
}
}
Related
I have my SCSS partials in my Nuxt 3 project's assets/css directory (e.g. assets/css/_cards.scss). I can import them in my components using the full path (#use '~/assets/css/cards';), but I'm having trouble getting the load path working so that I can import like #use 'cards';
From what I've seen, the Nuxt config should look like this to enable that, but this and similar variations are not working for me.
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
loadPaths: ['#/assets/css'],
},
},
},
},
});
This approach is not working for me either. However, my use case is that I wanted some global styles imported, as opposed to every component on its own.
What worked for me was to use css property directly inside defineNuxtConfig object.
export default defineNuxtConfig({
css: ["#/assets/css/_variables.scss"]
});
The correct key to use is includePaths which is documented here. I tried this key before, but the reason it did not work was that I used #/assets/css for the path. The # alias does not work in this option, so I needed to use ./assets/css for the path. Here is the corrected config:
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
includePaths: ['./assets/css'],
},
},
},
},
});
In my case, I want to add more colors from the TailwindCSS Palette. The versions I've got now are:
├── #tailwindcss/forms#0.3.3
├── #tailwindcss/typography#0.4.1
└── tailwindcss#2.2.15
Here is my tailwind.config.js file:
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
transparent: 'transparent',
current: 'currentColor',
amber: colors.amber,
black: colors.black,
blue: colors.blue,
cyan: colors.cyan,
emerald: colors.emerald,
fuchsia: colors.fuchsia,
gray: colors.trueGray,
blueGray: colors.blueGray,
coolGray: colors.coolGray,
trueGray: colors.trueGray,
warmGray: colors.warmGray,
green: colors.green,
indigo: colors.indigo,
lime: colors.lime,
orange: colors.orange,
pink: colors.pink,
purple: colors.purple,
red: colors.red,
rose: colors.rose,
sky: colors.sky,//warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.
teal: colors.teal,
violet: colors.violet,
yellow: colors.amber,
white: colors.white,
},
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
Then I ran npm run dev and deleted my Firefox caché.
The following color classes do work:
bg-amber-600
bg-green-600
bg-indigo-600
bg-blue-600
bg-orange-600
bg-sky-600
bg-red-600
bg-yellow-600
However, the following colors do not work:
bg-black-600
bg-fuchsia-600
bg-gray-600
bg-emerald-600
bg-cyan-600
bg-lime-600
bg-pink-600
bg-purple-600
bg-rose-600
bg-teal-600
bg-violet-600
bg-blueGray-600
bg-coolGray-600
bg-trueGray-600
bg-warmGray-600
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);
if (mix.inProduction()) {
mix.version();
}
Why is this happening? How do I fix it? Then how do I import all the colors? Can't all the colors be imported?
These are the colors you are getting https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js
bg-black-600 for instance doesn't exist, there are no shades of black in default tailwind, only shades of gray and some of them have getters for alternative names
If you aren't getting those you can try console logging the colors you are importing and see if your dependency is correct.
If some still aren't working you can just manually copy the js into your config file. I would also do a quick search in your CSS bundle to 100% check that the colors are there. Also as a final debug you can check the CSS that is used in your browser by looking through the dev tools to check the CSS sheet that is getting fetched (A string search for something like bg-rose-600 would work)
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>
Vuetify seems to define it's default dark theme here, and I would like to overwrite some of those values with custom colors.
It seems like scss is the way to overwrite this. However, when I try to change the backgound color, I don't see any change.
#import '~vuetify/src/styles/main.sass';
$material-dark: () !default;
$material-dark: map-deep-merge(
(
'background': #FFFF00
),
$material-dark
);
I'm importing it in main.js (import "./example.scss"), and I know it's loading (syntax errors make it crash), but the dark themed background doesn't change. If this isn't how vuetify styling works, what is?
For vue-cli, the scss style must be included in vue.config.js, ie.
module.exports = {
"configureWebpack": {
},
"css": {
"loaderOptions": {
"sass": {
"prependData": `#import "~#/styles/main.scss"` // change the route with you main.scss location in yout proyect
}
}
},
"lintOnSave": false,
"transpileDependencies": [
"vuetify"
],
"publicPath": ".",
}
Also, the scss file should import styles.sass instead of main.sass. ie.
#import '~vuetify/src/styles/styles.sass';
i'm trying to change the color palette ($foundation-palette) just like the guide from the Global Styles on Zurb Foundation, placing it on base/settings.scss file, but it doesn't seems to be working. here is the code:
// settings.scss
$foundation-palette: (
primary: #FF7212,
secondary: #000000,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
);
// app.scss
#import 'base/mixins';
#import 'base/variables';
#import 'base/settings';
#import 'base/color';
#import 'base/reset';
#import 'base/global';
#import 'base/text';
Any help, please, thanks...
All the variables from this Sass map are already defined and are/can be used by calling on a CSS property like:
.thing {
color: $success-color;
}
You can add your own map key value pairs like here I added a tertiary key:
$foundation-palette: (
primary: #5C27AF,
secondary: #3adb76,
tertiary: #009CBF,
success: #3adb76,
warning: #ffae00,
error: #cc4b37,
alert: #E3162F,
);
To call this new map key and get the value:
.thing {
color: get-color(tertiary);
}