Bulma framework

Sveiki,

Taigi susidūriau su problema. Niekaip negaliu perrašyti bulma "variables". Skaičiau https://bulma.io/documentation/customize/.

Poto ieškojau informacijos jų github, kaip mačiau daugeliau žmonių kyla problema perrašyti stilių.

Viską dariau pagal jų gidą, tačiau vistiek niekas nesikeičia... Čia jų pvz.: kaip turi atrodyti perrašymas:

// 1. Import the initial variables
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;

// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);

// 5. Add new color variables to the color map.
@import "../sass/utilities/derived-variables";
$addColors: (
 "twitter":($twitter, $twitter-invert),
 "linkedin": ($linkedin, $linkedin-invert),
 "github": ($github, $github-invert)
);
$colors: map-merge($colors, $addColors);

// 6. Import the rest of Bulma
@import "../bulma";

O čia mano .scss failas:

// 1. Import the initial variables
@import "./node_modules/bulma/sass/utilities/initial-variables";
@import "./node_modules/bulma/sass/utilities/functions";
// @import "./node_modules/bulma/bulma";


// $zalia: hsl(170, 100%, 40%);
$zalia: hsl(14, 87%, 48%);
$melyna: hsl(182, 98%, 35%);
$family-serif: 'Rajdhani', sans-serif;


$primary: $zalia;
$family-primary: $family-serif;

Visiškai niekas nesikeičia.... Gal čia dėl to, kad naudoju .scss o ne .sass? Bet kiek domėjaus neturi reikšmės...

Gal kas galit pakonsultuot ar padėt? :D

P.S. Šiaip jei tarkim perrašai class viskas veikia:

.navbar{
   min-height: 5rem;
   background: #FFFFFF;  /* fallback for old browsers */
   -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
}

Versijos:

Laravel Framework 5.6.27

Bulma v0.7.1

Ten jų instrukcijos kiek unclear.

Aš darau taip:

@import "node_modules/bulma/sass/utilities/initial-variables.sass" //variables

@import '_customBulma' //mano keitimai

// the rest

Gali pavyzdį pažiūrėti bulma.scss ir _customBulma.sass

Pas tave atrodo, kad trūksta the rest...

@import "../bulma";

Na vistiek nekazka :D

Ok. Mano app.scss (pagrindinis kuris konvertuojamas į .css)

// Fonts
//@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

//Font-Awesome
@import "node_modules/font-awesome/scss/font-awesome";

// Bulma
@import "node_modules/bulma/bulma";

// Bulma Vue modules
@import "node_modules/buefy/src/scss/buefy";

//Custom SCSS
@import "overrides";
@import "helpers";
@import "styles";

Mano overrrides.scss

@import "node_modules/bulma/sass/utilities/initial-variables";
@import "node_modules/bulma/sass/utilities/derived-variables";
@import "node_modules/bulma/bulma";


// $zalia: hsl(170, 100%, 40%);
$zalia: hsl(14, 87%, 48%);
$melyna: hsl(182, 98%, 35%);
$family-serif: 'Rajdhani', sans-serif;


$primary: $zalia;
$family-primary: $family-serif;

Vistiek niekas nejuda :(

Na vistiek nekazka :D

 

Ok. Mano app.scss (pagrindinis kuris konvertuojamas į .css)

// Fonts
//@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

//Font-Awesome
@import "node_modules/font-awesome/scss/font-awesome";

// Bulma
[b]@import "node_modules/bulma/bulma";[/b]
// šito nereikia, nes tu konfiguruoji overrides faile

// Bulma Vue modules
@import "node_modules/buefy/src/scss/buefy";

//Custom SCSS
@import "overrides"; 
@import "helpers";
@import "styles";

 

 

 

Mano overrrides.scss

@import "node_modules/bulma/sass/utilities/initial-variables";
[b]@import "node_modules/bulma/sass/utilities/derived-variables";
@import "node_modules/bulma/bulma";[/b] // šitie per anksti. Juk dar net kintamųjų nepateikei. Jie, kaip ir pavyzdį, eina paskutiniai.


// $zalia: hsl(170, 100%, 40%);
$zalia: hsl(14, 87%, 48%);
$melyna: hsl(182, 98%, 35%);
$family-serif: 'Rajdhani', sans-serif;


$primary: $zalia;
$family-primary: $family-serif;

 

 

Vistiek niekas nejuda :(

o tai pažiūrėt kokią klaidą metą kompiliuojant ne variantas?..

o tai pažiūrėt kokią klaidą metą kompiliuojant ne variantas?..

Variantas, o klaida rodo, kad bloga failų tvarka...

app.scss

// Fonts
//@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import 'variables';

//Font-Awesome
@import 'node_modules/font-awesome/scss/font-awesome';

// Bulma
// @import "node_modules/bulma/bulma"; // NEREIKIA

// Bulma Vue modules

//Custom SCSS
@import 'overrides'; //Bulma čia įdėjęs todėl prieš tai improtuoti nereikia!
@import 'node_modules/buefy/src/scss/buefy'; //Buefy eina PO Bulma 
@import 'helpers';
@import 'styles';

overrides.scss

// 1. Import the initial variables

//įkrauni funkcijas
@import 'node_modules/bulma/sass/utilities/initial-variables';
@import 'node_modules/bulma/sass/utilities/functions';
@import 'node_modules/bulma/sass/utilities/derived-variables';

//redaguoji
$zalia: hsl(170, 100%, 40%);
$zalia: hsl(14, 87%, 48%);
$melyna: hsl(182, 98%, 35%);
$family-serif: 'Rajdhani', sans-serif;

$primary: $zalia;
$primary-invert: findColorInvert($zalia);
$family-primary: $family-serif;

//ir tada paleidi visą Bulma
@import 'node_modules/bulma/bulma';

// Navbar
.navbar {
   min-height: 5rem;
   background: #ffffff; /* fallback for old browsers */
   -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75);
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75);
}

.navbar-item.is-tab {
   border-bottom: 2px solid transparent;
   &:hover {
       background-color: transparent;
       border-bottom-color: $melyna;
   }
}

a.navbar-item {
   text-transform: uppercase;
   font-weight: 500;
   color: $dark;
   &:hover {
       color: $melyna;
   }
}

čia per daug negražinau kaip pavyzdžiui, bet rekomenduočiau overrides stiliui ir variables išskirti į skirtingus failus. Ateity labai maišysis dabartiniai failai.

o tai pažiūrėt kokią klaidą metą kompiliuojant ne variantas?..

Klaidos nemeta. Blogai failų struktūra buvo.

...čia per daug negražinau kaip pavyzdžiui, bet rekomenduočiau overrides stiliui ir variables išskirti į skirtingus failus. Ateity labai maišysis dabartiniai failai.

AČIŪ!!!