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';
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'],
},
},
},
},
});
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 have a strange problem which may be related toe tree-shaking. I build a sapper app and in my rollup config, I use the svelte-preprocess package and configure it like this:
const preprocessOptions = {
scss: {
data: `#import '${join(process.cwd(), "src/styles/main.scss")}';`,
includePaths: ["node_modules", "src"],
},
postcss: {
plugins: [
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
minimize: !isDevelopment,
sourceMap: isDevelopment,
},
};
Via the scss plugin I copy the global stylesheet main.scss. All of the styles out of it seem to get applied, except for the styles of the body. Somehow these get ignored, because when I check the body styles in the dev console, it is empty. Can't you access the body in Sapper or is there maybe a special way to do this?
The problem is that with Sapper the body is part of the template.html file. That means there's no component with a body element. Svelte will remove styles that are not used in your component unless they are explicitly marked as global. The global preprocessor can help with this. I think in your case I would just get the bundler to create a separate css file for the template.html and include it explicitly like the global.css:
...
%sapper.base%
<link rel='stylesheet' href='global.css'>
...
I am using tailwind with laravel mix and postcss. I get the error:
#apply cannot be used with .text-grey-default because .text-grey-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-grey-default exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
I thought that is because is not in the same CSS file but I am using postcss-import to overcome this. The tag body doesn't have any pseudo-selector, and all the imports are at the top of the file. I really can't understand where this problem comes from and how to solve it.
app.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "variables";
#import url("https://fonts.googleapis.com/css?family=Nunito");
#import "#fortawesome/fontawesome-free/css/all.min.css";
body {
#apply text-grey-default;
}
webpack.mix.js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let atImport = require('postcss-import');
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [
atImport(),
tailwindcss("./tailwind.config.js"),
]
})
.version();
tailwind.config.js
let colors = {
"grey-default": "#636b6f",
};
module.exports = {
colors: colors,
textColors: colors,
options: {
prefix: "",
important: false,
separator: ":"
}
};
I have understood my mistake. I forgot to put colors and text Colors in theme:{} in my tailwind config.
I'm struggling to add SASS with an external stylesheet (Bulma) to my React application. So far I have set up Parcel with CSS modules via postcss. This is my .postcssrc config:
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
},
"postcss-modules": {
"generateScopedName": "[name]_[local]_[hash:base64:5]"
}
}
}
I have installed node-sass and successfully added a .scss file to one of my components. External (Bulma) styles are added via #import "~bulma/bulma"; and are correctly resolved.
Unfortunately, imported styles are not applied globally and instead the class names are modified similarly to local definitions, e.g.:
/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
#-webkit-keyframes container_spinAround_28_Bz {
from {
transform: rotate(0deg); }
to {
transform: rotate(359deg); } }
#keyframes container_spinAround_28_Bz {
from {
transform: rotate(0deg); }
to {
transform: rotate(359deg); } }
Note the added prefixes and suffixes.
Ideally, I would like to import the stylesheet globally and do not modify their names. I'd like to continue using CSS modules and I think I also have to use SASS in order to globally modify Bulma stylesheet by overriding SASS variables.
Anyway, things I've tried so far:
Using postcss-nested and wrapping the import with :global block:
:global {
#import "~bulma/bulma";
}
However, this throws an exception:
main.scss:5018:5: Missing whitespace before :global
Creating a separate scss file included directly in HTML file via <link> rather than imported in a jsx/tsx file to avoid using CSS modules.
This seems to break Parcel entirely, as it fails to link correct files in the compiled HTML files, i.e. <LONG-HASH>.css instead of generated main.<HASH>.css.
Using postcss-import.
Either my setup is incorrect or it has no effect on SASS files.
You can define regular expressions to mark matched files as global stylesheets with the globalModulePaths setting.
"postcss-modules": {
"globalModulePaths": [
".*\\.global\\..*"
]
}
The example above would mark all files with .global. in their name, e.g. main.global.css.
Managed to figure it out while writing the question.
The only solution that worked for me to load global CSS styles from rollup (when applying preserveModules: true) was using the 'rollup-plugin-styles' plugin and the following configuration:
// rollup.config.js
plugins: [
styles({
extensions: ['.css'],
use: ['css'],
}), …
]
// In the package.json you have to add the proper side effects
{
"sideEffects": [
"**/*.css",
"**/*.css.js" //this one is very important too
],
}
// MyComponent.tx
import '../styles/myGlobal.css';