search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.16k stars 3.95k forks source link

Webpack @extend !optional error #3391

Open m0xai opened 3 years ago

m0xai commented 3 years ago

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 commented 3 years ago

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

m0xai commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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

capi1O commented 1 year ago

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.