Bulma: [Request] Scss files

[tuannda]

Hello Support!

I can't build with sass file in Laravel Elixir because node-sass can't support build with .sass file.

Thank you, so much

[tuannda]

I had seen two issues about it. But if can you make version scss files. Because I confusing when use sass-convert :)

[jbrooksuk]

You don't need this.

Assuming you're using NPM (this works for Bower too) put this in your gulpfile.js

mix.sass('app.scss', 'public/css/app.css', {
    includePaths: [
        './node_modules/bulma',
    ]
})

Now in app.scss you can do the following:

@import "bulma/utilities/utilities";
@import "bulma/config/variables";

// Custom variable overrides
@import "modules/variables";

@import "bulma/config/generated-variables";

// Custom overrides.
@import "modules/generated-variables";

@import "bulma/base/base";
@import "bulma/elements/elements";
@import "bulma/components/components";
@import "bulma/layout/layout";

SCSS can compile SASS no problem, and if you're using the right architecture, you don't need to worry about making modifications.

[jgthms]

@jbrooksuk is right.

Any Sass compiler can handle both .scss and .sass files. It's just how you import them that changes.

[tuannda]

Thank @jbrooksuk
@jgthms :) I see

[tuannda]

I'm sorry @jbrooksuk and @jgthms . But I only build successfull if comment line

@import "hero"

In sass/laylout/layout

I'm sorry to disturb you!

[jbrooksuk]

Is the includePath in gulpfile.js setup as './node_modules/bulma',?

[tuannda]

Yes, I try version v0.0.20 and v0.0.23.

[tuannda]

I just find line error:

in file: sass/layout/hero.sass or bulma/layout/hero.sass

.header-item > a:not(.button)

[koddr]

Solution not working on Bulma 0.2.3 + Webpack (Laravel 5.3) :( help, please.

[HammenWS]

@koddr Same here.

[HammenWS]

@koddr

With Laravel 5.4 you can import scss like the following:

@import "~bulma";

Mind the ~

[jbreuer95]

@koddr
THANK YOU! this was driving me crazy, so what does the ~ do?

[MagoDev]

I have laravel 5.4 and imported it into the app.sass file but it does not take the changes. I've already run npm run dev

[mclxly]

I'm using Laravel 5.4 & bulma 0.4.2. My solution:

• Create a new file {project_root}/resource/assets/sass/_bulma_vars.sass

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

// 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

• append following lines to app.scss

// Bulma UI Framework
// - Custom variable overrides
@import "bulma_vars";
@import './node_modules/bulma/bulma.sass';

Hope helps~

[fjalvingh]

@jgthms Not all sass compilers can handle both scss and sass. All Java implementations I've seen so far (vaadin-sass-compiler, jsass) cannot: they handle mostly scss only. The only one that has rudimentary sass support is jsass, but that one does not accept sass inside @import statements.
It is amazing, I know, but this makes it hard to work with Bulma from Java if you want to be able to compile on the fly.

[volnei]

+1