Webpack @extend !optional error

[m0xai]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.9.3]
My browser is: Firefox Developer Edition
This is a Sass issue: I'm using version [6.0.1] node-sass
I am sure this issue is not a duplicate

Description

FYI: Its pretty okay, if i change main source codes of bulma with !optional attribute. But i don't want to do this every time, when bulma updates.

Steps to Reproduce

1. Install bulma via npm
2. install node-sass
3. import 'bulma/sass/elements/progress.sass'
4. import 'bulma/sass/elements/button.sass'
5. In Index.html >
   <progress class="progress is-large is-info" max="100">60%</progress>
6. In app.js >

  const changeBgBtn = document.getElementById('btn');
  changeBgBtn.addEventListener('click', changeIt);
  changeBgBtn.classList.add('button')

Expected behavior

Apply styles

Actual behavior

 ❯ npm run build ⏎

hallo-webpack@1.0.0 build
webpack

assets by status 114 KiB [cached] 2 assets
runtime modules 2.24 KiB 7 modules
orphan modules 3.69 KiB [orphan] 4 modules
javascript modules 545 KiB
modules by path ./node_modules/ 539 KiB
modules by path ./node_modules/style-loader/dist/runtime/.js 5.02 KiB 6 modules
modules by path ./node_modules/bulma/sass/elements/.sass 78 bytes 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.37 KiB 2 modules
./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
modules by path ./src/ 5.96 KiB
./src/index.js + 4 modules 4.96 KiB [built] [code generated]
./src/data.xml 113 bytes [built] [code generated]
./src/data.csv 188 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/style.css 726 bytes [built] [code generated]
./src/image.jpg 42 bytes (javascript) 38.5 KiB (asset) [built] [code generated]

ERROR in ./node_modules/bulma/sass/elements/button.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/bulma/sass/elements/button.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend %control !optional" to avoid this error.
╷
61 │ @extend %control
│ ^^^^^^^^^^^^^^^^
╵
node_modules/bulma/sass/elements/button.sass 61:3 root stylesheet
SassError: SassError: The target selector was not found.
Use "@extend %control !optional" to avoid this error.
╷
61 │ @extend %control
│ ^^^^^^^^^^^^^^^^
╵
node_modules/bulma/sass/elements/button.sass 61:3 root stylesheet
at /Users/keremzopcuk/JS/hallo-webpack/node_modules/sass-loader/dist/index.js:54:16
at Function.call$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:93911:16)
at _render_closure1.call$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:82164:12)
at _RootZone.runBinary$3$3 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:27587:18)
at _FutureListener.handleError$1 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:26136:19)
at _Future__propagateToListeners_handleError.call$0 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:26434:49)
at Object._Future__propagateToListeners (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:4550:77)
at _Future._completeError$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:26266:9)
at _AsyncAwaitCompleter.completeError$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:25920:12)
at Object._asyncRethrow (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:4349:17)
@ ./node_modules/bulma/sass/elements/button.sass 8:6-127 22:17-24 26:0-97 26:0-97 27:22-29 27:33-47 27:50-64
@ ./src/index.js 8:0-40

ERROR in ./node_modules/bulma/sass/elements/progress.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/bulma/sass/elements/progress.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend %block !optional" to avoid this error.
╷
12 │ @extend %block
│ ^^^^^^^^^^^^^^
╵
node_modules/bulma/sass/elements/progress.sass 12:3 root stylesheet
SassError: SassError: The target selector was not found.
Use "@extend %block !optional" to avoid this error.
╷
12 │ @extend %block
│ ^^^^^^^^^^^^^^
╵
node_modules/bulma/sass/elements/progress.sass 12:3 root stylesheet
at /Users/keremzopcuk/JS/hallo-webpack/node_modules/sass-loader/dist/index.js:54:16
at Function.call$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:93911:16)
at _render_closure1.call$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:82164:12)
at _RootZone.runBinary$3$3 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:27587:18)
at _FutureListener.handleError$1 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:26136:19)
at _Future__propagateToListeners_handleError.call$0 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:26434:49)
at Object._Future__propagateToListeners (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:4550:77)
at _Future._completeError$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:26266:9)
at _AsyncAwaitCompleter.completeError$2 (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:25920:12)
at Object._asyncRethrow (/Users/keremzopcuk/JS/hallo-webpack/node_modules/sass/sass.dart.js:4349:17)
@ ./node_modules/bulma/sass/elements/progress.sass 8:6-129 22:17-24 26:0-99 26:0-99 27:22-29 27:33-47 27:50-64
@ ./src/index.js 7:0-42

webpack 5.48.0 compiled with 2 errors in 5306 ms

[jgthms]

Can you try to import the utilities as well, before everything else? import 'bulma/sass/utilities/_all.sass'

[m0xai]

Can you try to import the utilities as well, before everything else? import 'bulma/sass/utilities/_all.sass'

It didn't help. Maybe i should wait for an update and keep original bulma files changed.

[m0xai]

I just find out that, if i import main bulma.sass, it works without error. But i just want to use button.sass and process.sass.

[yoshi-plur]

I got the same error below when compiling just button.sass.

SassError: The target selector was not found. Use @extend %control !optional" to avoid this error.

If I include utilities/_all.sass, it compiles button.sass correctly.
But I'm not sure if I'm doing right because I'm using webpack 5.
Does Bulma work with webpack 5 even though the document mention only webpack 3 and 4 ?

[brunomarks7]

The same problem here. I'm using Vite with React.

[capi1O]

I had a similar error (on mixin %control) using Astro (which uses vite-js) when importing bulma-calendar SASS (@import '~bulma-calendar/src/sass/index.sass'; )

I fixed it by patching bulma replacing @extend %control by @include control in bulma/sass/form/shared.sass

For some reason the mixin variable name was not prefixed by % but a % was used in the corresponding @extend. AFAIK mixins should be "imported" using @include not @extend so I have no idea what was the goal there, maybe some old intended-syntax.