legacy-modules
legacy-modules copied to clipboard
Bulma SASS variables?
How do you edit your bulma SASS variables in a way that works with nuxt?
Using Buefy, I managed to do it like that:
Create a buefy.js file in the plugins directory:
import Vue from 'vue';
import Buefy from 'buefy';
// Volontarily omitted
// import 'buefy/lib/buefy.css';
Vue.use(Buefy);
Create an overrides.scss file in the assets directory, and import it in your app.scss file: Overrides.scss
// Import Bulma's core
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
// OVERRIDES GOES BETWEEN HERE...
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
$family-sans-serif: 'Nunito', sans-serif;
// Bulma colors
$primary: #0e637e;
$primary-invert: findColorInvert($primary);
$colors: ('primary': ($primary, $primary-invert));
// ... AND HERE
// Import Bulma and Buefy styles
@import '~bulma';
@import '~buefy/src/scss/buefy';
App.scss
@import 'overrides';
// Your custom scss goes there...
Then configure nuxt.config.js like that (the post-css options is for removing alerts):
build: {
/*
** Run ESLint on save
*/
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
});
}
},
vendor: ['buefy'],
postcss: {
plugins: {
'postcss-custom-properties': false,
},
},
},
plugins: ['~/plugins/buefy.js'],
css: [{ src: '~/assets/scss/app.scss', lang: 'scss' }],
Just wanted to bump this one as I think it might still be an issue.
I have a similar file to @VonStruddle's overrides.scss called _bulma.scss and I import is into my main global styles app.scss.
I found that Bulma was overriding all my styles and I could not override the Bulma variables no matter what I tried. As soon as I ran
npm uninstall --save-dev @nuxtjs/bulma
...and removed the '@nuxtjs/bulma' from my modules, everything immediately worked as expected. Could this be a bug with the plugin somehow?
can confirm ^
Uninstalling @nuxtjs/bulma
and just using @import '~bulma/bulma';
in my global scss file worked as expected in setting bulma variables correctly.
@wahidrahim thank you for confirming?
I wonder if anyone knows of any special reason why - or set-up with which - the plugin should not work. Is the plugin supposed work out of the box or is configuration required?
How can I override bulma variables without using Buefy? @VonStruddle ?
@import '~bulma/sass/utilities/_all';
// Set your colors
$primary: #0075f2;
$primary-invert: findColorInvert($primary);
$twitter: #4099ff;
$twitter-invert: findColorInvert($twitter);
$danger: #ff595e;
$danger-invert: findColorInvert($danger);
$success: #8ac926;
$success-invert: findColorInvert($success);
$warning: #ffca3a;
$warning-invert: findColorInvert(#ffca3a);
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
'white': (
$white,
$black,
),
'black': (
$black,
$white,
),
'light': (
$light,
$light-invert,
),
'dark': (
$dark,
$dark-invert,
),
'primary': (
$primary,
$primary-invert,
),
'info': (
$info,
$info-invert,
),
'success': (
$success,
$success-invert,
),
'warning': (
$warning,
$warning-invert,
),
'danger': (
$danger,
$danger-invert,
),
'twitter': (
$twitter,
$twitter-invert,
),
);
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
@import '~bulma';
make a folder called styles , inside which make an app.scss, add this file to nuxt.config.js under css section as ['~/assets/styles/app.scss'] uninstall nuxt-bulma and install plain bulma with npm i bulma @simplenotezy this is how to override bulma without buefy
For the app with @nuxtjs/style-resources
,
css: [
{ src: 'bulma/bulma.sass', lang: 'sass' },
...
],
styleResources: {
...
sass: ['~assets/css/vars/bulma-overrides.sass']
},
I solved it by replacing:
@import "~bulma/sass/utilities/_all.sass";
with:
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
Then in nuxt.config.js
:
css: [
{ src: '~assets/scss/main.scss', lang: 'sass' },
],
styleResources: {
scss: ['~assets/scss/main.scss']
},
Also had to reinstall bulma using npm.
@Ra1phM thanks for sharing! will give that a try next time