Undefined mixins and variables: +control in extends.sass, +ltr and +rtl in icon.sass, and $control-padding-horizontal in input-textarea.sass

[chlumpchatkupt]

This is about Bulma.

This is a bug.

Overview of the problem

This is about the Bulma CSS framework.

I'm using Bulma version 0.9.4.

My browser is: Version 113.0.5672.126 (Official Build, ungoogled-chromium) (x86_64).

I am sure this issue is not a duplicate.

Description

Some files are missing the appropriate imported definitions.

Steps to Reproduce

1. Use @use 'bulma/sass/utilities/extends';, @use 'bulma/sass/elements/icon';, or @use 'bulma/sass/form/input-textarea';.
2. Try to compile or build a Docker image.

Expected behavior

No error.

Actual behavior

Error: Undefined mixin or Undefined variable.

[charlot-shaw]

I am experiencing this as well, I'm building a zola sites and wanted to customize bulma for it. Zola eagerly compiles all the sass, and so crashes and dies on this error.

[suterma]

I am not sure what you are trying to achieve, so sorry for my possible ignorance. I use

@import '../node_modules/bulma/bulma.sass';

which includes everything, then my build process handles the eventual minification.

Are you trying to prematurely minimize your bulma footprint?

[charlot-shaw]

I'm building a static site with Zola and Bulma, no NPM, so here's my reproduction steps.

1. get Zola and initiate a new site with it, saying yes to Sass support.
2. Download the 0.9.4 release of Bulma, extract it, and put it's contents in the Sass folder.
3. zola serve dies with this error.

   Building site...
   Checking all internal links with anchors.
   > Successfully checked 0 internal link(s) with anchors.
   -> Creating 0 pages (0 orphan) and 0 sections
   Warning: "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
   .//tmp/tmp.gbIp5WnMRZ/sass/sass/utilities/animations.sass:1:7
   Error: Failed to serve the site
   Error: Error: Undefined mixin.
   ╷
   4 │   +control
   │    ^^^^^^^
   ╵
   .//tmp/tmp.gbIp5WnMRZ/sass/sass/utilities/extends.sass:4:4

I note that Zola uses Grass under the hood, but Grass notes that it can compile Bulma perfectly in it's tests.

I'd wonder if this was a Zola bug, but if someone else is also seeing it, I come back to suspecting Bulma. Zola compiles all the sass files it can find into CSS files, eagerly. I haven't tested the exact logic, but I think it breadth first searches, compiling whenever it encounters something not already required. As mixins seems like something I don't want to cut out and expect Bulma once compilation finishes, I don't have much recourse.

I fully admit, I do not know enough Sass to fix this myself, so this is my summary of everything around the problem.

[suterma]

I can reproduce the steps above, although in my case the error message is very slightly different, I am sure it is of the same origin:

Change detected @ 2024-03-19 23:46:24
-> Sass file changed /home/marcel/Desktop/zola-test/myblog/sass/sass/grid/_all.sass
Warning: "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."
    .//home/marcel/Desktop/zola-test/myblog/sass/sass/base/helpers.sass:1:7
Error: Failed to build the site
Error: Error: Undefined mixin.
   ╷
35 │       +ltr
   │        ^^^
   ╵
.//home/marcel/Desktop/zola-test/myblog/sass/sass/elements/icon.sass:35:8

I have never worked with zola beforehand, but I am interested in a SSG for my project which uses bulma, so it's interesting to me.

[suterma]

I think you ran into the issue mentioned here: https://github.com/getzola/zola/issues/431 The explicitly talk about bulma and it's sass file structure. It seems that Bulma is not living up to some standard.

It seems that https://github.com/jgthms/bulma/issues/2401 is also related.

However, I leave further comment to someone with more Sass experience.

@jgthms Because the most useful fix here seems be to rename the .sass files (fixing the underscore "problem"), which might be a breaking change for many users, the upcoming v1 release would be a perfect time to fix this.

[charlot-shaw]

I'll see if it fixes the issue doing that locally. I'd love to make a pull request if it does, but I don't know think renaming 90% of all files before the 1.0 release would be welcome.

On Tue, Mar 19, 2024, 5:57 PM Marcel Suter @.***> wrote:

I think you ran into the issue mentioned here: getzola/zola#431 https://github.com/getzola/zola/issues/431 The explicitly talk about bulma and it's sass file structure. It seems that Bulma is not living up to some standard. However, I leave further comment to someone with more Sass experience.

— Reply to this email directly, view it on GitHub https://github.com/jgthms/bulma/issues/3675#issuecomment-2008301399, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBYEIOQGMZ7IBGUJHMP533DYZC7GTAVCNFSM6AAAAAA35IFWLWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBYGMYDCMZZHE . You are receiving this because you commented.Message ID: @.***>

[suterma]

I have found a workaround that is quite simple: Put the Bulma framework in a folder outside ./sass then import it in an index.sass or similar file from within the ./sass folder.

Like this:

myblog
├── bulma-0.9.4
│   └── bulma
│       ├── css
│       └── sass
│           ├── base
│           ├── components
│           ├── elements
│           ├── form
│           ├── grid
│           ├── helpers
│           ├── layout
│           └── utilities
├── content
├── public
│   └── sass
│       ├── base
│       ├── elements
│       ├── helpers
│       └── layout
├── sass
├── static
├── templates
└── themes

And the index.sass or similar file in the ./sass folder looks like this:

@charset "utf-8"
@import "./../bulma-0.9.4/bulma/bulma.sass"

Now zola does just compile the single sass file, importing everything else untreated as provided by bulma.

The result is one single .css file in the static folder as one might expect.

It a bit of a quirk, but it does not require any change in Bulma and still allows for customization, either inside zola's sass folder or in the separate bulma folder, should it be required.

[chlumpchatkupt]

I managed to solve this a while back as follows.

1. Create our own custom scss package (which contains various configurations and overrides).

2. In the scss package, ensure that each file has a unique filename and is pulling in the relevant files. For example, the file _company_progress.scss (where 'company' is the company name) looks like:

/* Buefy/Bulma overrides */                                                                                                                                                      
@use '../variables/_company_color.scss' as *; 

$progress-bar-background-color: $gray6;

3. In the project directory, the main file /src/assets/scss/main.scss pulls in the various files, with Bulma and Buefy being pulled in last:

   
   @use 'scss/override/_company_progress.scss' as *;

/ Bulma/Buefy styles / @import 'bulma/bulma.sass'; @import 'buefy/src/scss/buefy.scss';

4. Build the docker image and install (via pnpm) Bulma, Buefy, and scss.