Symptoms:

Installation happened without hiccup, IDE and autocompletion recognize the differents classses

However, event following the tutorial , thing act like a classic in page link (jumps to the anchor instead of collapsing/expanding)

Versions and installation

I installed following the instructions in the documentation. My project is using Yarn and Webpack.

Running : yarn add @creativebulma/bulma-collapsible

Add the import in the scss file:

@import "~@creativebulma/bulma-collapsible";

Since I am using webpack, I choosed to import the javascript in in the app.js that webpack will compile:

// any CSS you import will output into a single css file (app.css in this case)
import './styles/bulma_style.scss';
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

// import javascript dependencies
import bulmaCollapsible from '@creativebulma/bulma-collapsible';

I also tried with the cdn and even including it directly using the webpack.js file, none worked.

My versions are:

• Bulma 0.9.3
• Bulma-collapsible 1.0.4

WorkAround

I am not a javascript expert (and clearly not a css one :D ) so i did not try really hard to understand where the bug came from, however, I build a small workaround, hopefully it can help solve the problem or help someone while this is fixed:

// import javascript dependencies
import bulmaCollapsible from '@creativebulma/bulma-collapsible';

const collapsibleTriggers = document.getElementsByClassName('collapsible')
Array.from(collapsibleTriggers).forEach(function(item) {
  let target = document.getElementById(item.dataset.target)
  let collapsibleInstance = target.bulmaCollapsible();

  item.addEventListener("click", function(){
    if (collapsibleInstance.collapsed()){
      collapsibleInstance.expand()
    }else{
      collapsibleInstance.collapse()
    }
  });
});

Good luck everyone

Not able to collapse if I change it to
v-for="(section, index) in my.sections"
But when I change it to the following it works
v-for="(section, index) in my2.sections"

example

I'm having a strange bug in Chrome where an active collapse container (.is-collapsible.is-active) does not get expanded to the proper height. It's a strange bug because it only happens some of the time. If I refresh the page 10 times it only happens some random number of times, say 30%. And if I hard refresh the page it happens probably 90% of the time..

I don't even know where to begin with this, but maybe you have some ideas. Could very well be related to issue #2

On Bulma 0.9.3.
Installed bulma-collapsible via Yarn.
Collapsing does not transition, expanding does work.

Hi! I want to use this library in my Angular 10 project but the import always fails. It always reports "Could not find a declaration file for module '@creativebulma/bulma-collapsible". Is there anyway to resolve this issue? Thanks!

The only one that does is the first one. I'm trying to reuse the accordion from the documentation. It doesn't work. None of the others work either, just the first one. How am I supposed to make it work?

You misspelled the "has" in the readme.

This components as been developped as a Bulma extension and bring you the ability to easily Collapse/Exand any kind of element/component.

I'm wondering if there's a way to nest collapsible with ease. Right now if you have a collapsible inside of another collapsible it will push any element beneath down and out of view. Is there a way to have it so the child (nested) collapsible can adjust the weight of the parent collapsible?

I tried adding the following snippet to a django template: https://bulma-collapsible.netlify.app/usage/#collapsible-card
However the element appears collapsed, and pressing the button does not expand it.

Made sure that bulma-collapsible is enabled.

Hi, I followed https://demo.creativebulma.net/components/bulma-collapsible/1.0/usage/#accordion . To create an accordion with multiple message boxes. In local, it works fine and it is great. However it does not collapse in production.

I deployed to Heroku as right now the app is in FREE tier.

Ruby: 2.7.0
Rails: 6.0
Bulma-collapsible: 1.0.4
Bulma: https://github.com/joshuajansen/bulma-rails

Do I need to install bulma npm packages? Or Bulma-rails is enough?

Installed extension using instructions from the live demo via npm. Currently not functioning.

i created my menu with your module, everything went well in development mode, but when i build in production mode it fails with this error:

walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ gatsby build
success open and validate gatsby-configs — 0.012 s
success load plugins — 0.905 s
success onPreInit — 0.005 s
success delete html and css files from previous builds — 0.006 s
success initialize cache — 0.012 s
success copy gatsby files — 0.022 s
success onPreBootstrap — 0.015 s
success source and transform nodes — 0.452 s
success building schema — 0.530 s
success createPages — 0.134 s
success createPagesStatefully — 0.062 s
success onPreExtractQueries — 0.002 s
success update schema — 0.049 s
success extract queries from components — 0.459 s
success run static queries — 0.058 s — 2/2 35.09 queries/second


success run page queries — 1.185 s — 43/43 36.31 queries/second
success write out page data — 0.005 s
success write out redirect data — 0.001 s

success onPostBootstrap — 0.000 s

info bootstrap finished - 7.227 s


gatsby-plugin-purgecss: Only processing  /home/walter/kalwalt-github/gatsby-starter-i18n-bulma/src/components/all.sass
success Building production JavaScript and CSS bundles — 56.826 s
 
gatsby-plugin-purgecss:
 Previous CSS Size: 344.87 KB
 New CSS Size: 183.39 KB (-46.82%)
 Removed ~161.48 KB of CSS


error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

> 1 | !function webpackUniversalModuleDefinition(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.bulmaCollapsible=t():e.bulmaCollapsible=t()}(window,function(){return function(e){var t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,__webpack_require__),r.l=!0,r.exports}return __webpack_require__.m=e,__webpack_require__.c=t,__webpack_require__.d=function(e,t,n){__webpack_require__.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.t=function(e,t){if(1&t&&(e=__webpack_require__(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(__webpack_require__.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)__webpack_require__.d(n,r,function(t){return e[t]}.bind(null,r));return n},__webpack_require__.n=function(e){var t=e&&e.__esModule?function getDefault(){return e.default}:function getModuleExports(){return e};return __webpack_require__.d(t,"a",t),t},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=12)}([function(e,t){function _getPrototypeOf(t){return e.exports=_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(e){return e.__proto__||Object.getPrototypeOf(e)},_getPrototypeOf(t)}e.exports=_getPrototypeOf},function(e,t){e.exports=function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){function _defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),e}},function(e,t){e.exports=function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t,n){var r=n(8);e.exports=function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){r(e,t,n[t])})}return e}},function(e,t,n){var r=n(6),o=n(3);e.exports=function _possibleConstructorReturn(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function _typeof2(e){return(_typeof2="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof2(e){return typeof e}:function _typeof2(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _typeof(t){return"function"==typeof Symbol&&"symbol"===_typeof2(Symbol.iterator)?e.exports=_typeof=function _typeof(e){return _typeof2(e)}:e.exports=_typeof=function _typeof(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":_typeof2(e)},_typeof(t)}e.exports=_typeof},function(e,t,n){var r=n(11);e.exports=function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t){e.exports=function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t,n){n(0);var r=n(10);function _get(t,n,o){return"undefined"!=typeof Reflect&&Reflect.get?e.exports=_get=Reflect.get:e.exports=_get=function _get(e,t,n){var o=r(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}},_get(t,n,o||t)}e.exports=_get},function(e,t,n){var r=n(0);e.exports=function _superPropBase(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=r(e)););return e}},function(e,t){function _setPrototypeOf(t,n){return e.exports=_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(e,t){return e.__proto__=t,e},_setPrototypeOf(t,n)}e.exports=_setPrototypeOf},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r),i=n(2),s=n.n(i),l=n(5),a=n.n(l),c=n(3),u=n.n(c),f=n(0),p=n.n(f),_=n(9),d=n.n(_),h=n(7),y=n.n(h),v=n(4),b=n.n(v),m=function(){function EventEmitter(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];o()(this,EventEmitter),this._listeners=new Map(e),this._middlewares=new Map}return s()(EventEmitter,[{key:"listenerCount",value:function listenerCount(e){return this._listeners.has(e)?this._listeners.get(e).length:0}},{key:"removeListeners",value:function removeListeners(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];null!==t?Array.isArray(t)?name.forEach(function(t){return e.removeListeners(t,n)}):(this._listeners.delete(t),n&&this.removeMiddleware(t)):this._listeners=new Map}},{key:"middleware",value:function middleware(e,t){var n=this;Array.isArray(e)?name.forEach(function(e){return n.middleware(e,t)}):(Array.isArray(this._middlewares.get(e))||this._middlewares.set(e,[]),this._middlewares.get(e).push(t))}},{key:"removeMiddleware",value:function removeMiddleware(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null!==t?Array.isArray(t)?name.forEach(function(t){return e.removeMiddleware(t)}):this._middlewares.delete(t):this._middlewares=new Map}},{key:"on",value:function on(e,t){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(Array.isArray(e))e.forEach(function(e){return n.on(e,t)});else{var o=(e=e.toString()).split(/,|, | /);o.length>1?o.forEach(function(e){return n.on(e,t)}):(Array.isArray(this._listeners.get(e))||this._listeners.set(e,[]),this._listeners.get(e).push({once:r,callback:t}))}}},{key:"once",value:function once(e,t){this.on(e,t,!0)}},{key:"emit",value:function emit(e,t){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];e=e.toString();var o=this._listeners.get(e),i=null,s=0,l=r;if(Array.isArray(o))for(o.forEach(function(a,c){r||(i=n._middlewares.get(e),Array.isArray(i)?(i.forEach(function(n){n(t,function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null!==e&&(t=e),s++},e)}),s>=i.length&&(l=!0)):l=!0),l&&(a.once&&(o[c]=null),a.callback(t))});-1!==o.indexOf(null);)o.splice(o.indexOf(null),1)}}]),EventEmitter}(),g=n(8),w=n.n(g),k=n(6),O=n.n(k),x=function isFunction(e){return"function"==typeof e},P=function isString(e){return"string"==typeof e||!!e&&"object"===O()(e)&&"[object String]"===Object.prototype.toString.call(e)},E=function isNode(e){try{return Node.prototype.cloneNode.call(e,!1),!0}catch(e){return!1}},S=/^(?:f(?:alse)?|no?|0+)$/i,j=function uuid(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"")+([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,function(e){return(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)})},C=function detectSupportsPassive(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function get(){return e=!0,!0}});window.addEventListener("testPassive",null,t),window.removeEventListener("testPassive",null,t)}catch(e){}return e},A=function optionsFromDataset(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return E(e)&&e.dataset?Object.keys(e.dataset).filter(function(e){return Object.keys(t).includes(e)}).reduce(function(t,n){return b()({},t,w()({},n,e.dataset[n]))},{}):{}};window.Node&&!Node.prototype.on&&(Node.prototype.on=function(e,t){var n=this;Array.isArray(e)||(e=e.split(" ")),e.forEach(function(e){n.addEventListener(e,t,!!C()&&{passive:!1})})}),window.NodeList&&!NodeList.prototype.on&&(NodeList.prototype.on=function(e,t){this.forEach(function(n){n.on(e,t)})}),window.Node&&!Node.prototype.off&&(Node.prototype.off=function(e,t){var n=this;Array.isArray(e)||(e=e.split(" ")),e.forEach(function(e){n.removeEventListener(e,t,!!C()&&{passive:!1})})}),window.NodeList&&!NodeList.prototype.off&&(NodeList.prototype.off=function(e,t){this.forEach(function(n){n.off(e,t)})});var q=function(e){function Component(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(o()(this,Component),(t=a()(this,p()(Component).call(this))).element=P(e)?document.querySelector(e):e,!t.element)throw new Error("An invalid selector or non-DOM node has been provided for ".concat(t.constructor.name,"."));return t.element[t.constructor.name]=t.constructor._interface.bind(u()(t)),t.element[t.constructor.name].Constructor=t.constructor.name,t.id=j(t.constructor.name+"-"),t.options=b()({},r,n,A(t.element,r)),t}return y()(Component,e),s()(Component,null,[{key:"attach",value:function attach(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=new Array;if(null===t)return r;var o=function querySelectorAll(e,t){return x(e)?e(t||document):P(e)?t&&E(t)?t.querySelectorAll(e):document.querySelectorAll(e):E(e)?[e]:NodeList.prototype.isPrototypeOf(e)?e:null}(t);return[].forEach.call(o,function(o){void 0===o[e.constructor.name]?r.push(new e(o,b()({selector:t},n))):r.push(o[e.constructor.name])}),r}},{key:"_interface",value:function _interface(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("string"==typeof e){if(void 0===this[e])throw new TypeError('No method named "'.concat(e,'"'));return this[e](e)}return this}}]),Component}(m),L={allowMultiple:!1};n.d(t,"default",function(){return N});var N=function(e){function bulmaCollapsible(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return o()(this,bulmaCollapsible),(t=a()(this,p()(bulmaCollapsible).call(this,e,n,L))).onTriggerClick=t.onTriggerClick.bind(u()(t)),t._init(),t}return y()(bulmaCollapsible,e),s()(bulmaCollapsible,[{key:"_init",value:function _init(){if(this._parent=this.element.dataset.parent,this._parent){var e=document.getElementById(this._parent);this._siblings=e.querySelectorAll(this.options.selector)||[]}this._triggers=document.querySelectorAll('[data-action="collapse"][href="#'.concat(this.element.id,'"], [data-action="collapse"][data-target="').concat(this.element.id,'"]'))||null,this._triggers&&this._triggers.on("click touch",this.onTriggerClick),this.element.classList.contains("is-active")?this.expand():this.collapse()}},{key:"destroy",value:function destroy(){this._triggers&&this._triggers.off("click touch",this.onTriggerClick,!1)}},{key:"collapsed",value:function collapsed(){return this._collapsed}},{key:"expand",value:function expand(){var e=this;(void 0===this._collapsed||this._collapsed)&&(this.emit("before:expand",this),this._parent&&!function BooleanParse(e){return!S.test(e)&&!!e}(this.options.allowMultiple)&&this._siblings.forEach(function(t){t.isSameNode(e.element)||t.bulmaCollapsible&&t.bulmaCollapsible("close")}),this.element.style.height=this.element.scrollHeight+"px",this.element.classList.add("is-active"),this.element.setAttribute("aria-expanded",!0),this._triggers&&this._triggers.forEach(function(e){e.classList.add("is-active")}),this._collapsed=!1,this.emit("after:expand",this))}},{key:"open",value:function open(){this.expand()}},{key:"collapse",value:function collapse(){void 0!==this._collapsed&&this._collapsed||(this.emit("before:collapse",this),this.element.style.height=0,this.element.classList.remove("is-active"),this.element.setAttribute("aria-expanded",!1),this._triggers&&this._triggers.forEach(function(e){e.classList.remove("is-active")}),this._collapsed=!0,this.emit("after:collapse",this))}},{key:"close",value:function close(){this.collapse()}},{key:"onTriggerClick",value:function onTriggerClick(e){e.preventDefault(),this.collapsed()?(e.currentTarget.classList.add("is-active"),this.expand()):(e.currentTarget.classList.remove("is-active"),this.collapse())}}],[{key:"attach",value:function attach(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".is-collapsible",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return d()(p()(bulmaCollapsible),"attach",this).call(this,e,t)}}]),bulmaCollapsible}(q)}]).default});
    |                                                                                                                                                                                                                                                      ^


  WebpackError: ReferenceError: window is not defined
  
  - bulma-collapsible.min.js:1 Object../node_modules/@creativebulma/bulma-collap    sible/dist/js/bulma-collapsible.min.js
    [lib]/[@creativebulma]/bulma-collapsible/dist/js/bulma-collapsible.min.js:1:    246
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - sync-requires.js:8 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:8:58
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - static-entry.js:9 Module../.cache/static-entry.js
    lib/.cache/static-entry.js:9:22
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - bootstrap:83 
    lib/webpack/bootstrap:83:1
  
  
  - universalModuleDefinition:3 webpackUniversalModuleDefinition
    lib/webpack/universalModuleDefinition:3:1
  
  - universalModuleDefinition:10 Object.<anonymous>
    lib/webpack/universalModuleDefinition:10:2
  

walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ import { FormattedMessage } from 'react-intl';
import-im6.q16: not authorized `react-intl' @ error/constitute.c/WriteImage/1037.
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ import menuTree from '../data/menuTree'
import-im6.q16: not authorized `../data/menuTree' @ error/constitute.c/WriteImage/1037.
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ import Dropdown from '../components/DropDownMenu'
import-im6.q16: not authorized `../components/DropDownMenu' @ error/constitute.c/WriteImage/1037.
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ import TestMenu from '../components/TestMenu'
import-im6.q16: not authorized `../components/TestMenu' @ error/constitute.c/WriteImage/1037.
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ import RootMenu from '../components/RootMenu'
import-im6.q16: not authorized `../components/RootMenu' @ error/constitute.c/WriteImage/1037.
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ //import RootMenuMobile from '../components/RootMenuMobile'
bash: //import: File o directory non esistente
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ import RootMenuMobile from '../components/RootMenuMobile'
import-im6.q16: unable to grab mouse `': Risorsa temporaneamente non disponibile @ error/xwindow.c/XSelectWindow/9181.
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$ import {
import-im6.q16: unable to grab mouse `': Risorsa temporaneamente non disponibile @ error/xwindow.c/XSelectWindow/9181.
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$   BrowserView,
BrowserView,: comando non trovato
walter@walter-RC530-RC730:~/kalwalt-github/gatsby-starter-i18n-bulma$   MobileView,

As read in this discussion gatsbyjs/gatsby#309 probably the cause is a window object inside bulma-collapsible code that make fails the build process in production mode:

but not sure how to change the code, if someone has an idea let me know, please! 😄

Expanded elements become non-responsive due to the height being set to a fixed value. Better would be to store the state of the element style height before it is collapsed and restore it to that state when the element is expanded again.

Hi i'm trying your nice library with the Gatsby framework that is based on React. Following your docs i had some problems while importing into the framework.
While importing the Sass lib i had to declare in this way:

@import "~@creativebulma/bulma-collapsible/src/sass/index.sass"

for the avascript lib instead:

import bulmaCollapsible from '@creativebulma/bulma-collapsible'

I want to report also some typo errors in your doc about this last:

- import bulmaCollapsible from '~bulma-collpasible';
+ import bulmaCollapsible from '~bulma-collapsible';

Thank you for your attention,
Walter

I followed your instructions to the letter (simple copy and pasting).

The following error happened upon performing npm run start:

./src/style/style.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/style/style.scss) !function webpackUniversalModuleDefinition(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.bulmaCollapsible=t():e.bulmaCollapsible=t()}(window,function(){return function(e){var t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,__webpack_require__),r.l=!0,r.exports}return __webpack_require__.m=e,__webpack_require__.c=t,__webpack_require__.d=function(e,t,n){__webpack_require__.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.t=function(e,t){if(1&t&&(e=__webpack_require__(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(__webpack_require__.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)__webpack_require__.d(n,r,function(t){return e[t]}.bind(null,r));return n},__webpack_require__.n=function(e){var t=e&&e.__esModule?function getDefault(){return e.default}:function getModuleExports(){return e};return __webpack_require__.d(t,"a",t),t},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=12)}([function(e,t){function _getPrototypeOf(t){return e.exports=_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(e){return e.__proto__||Object.getPrototypeOf(e)},_getPrototypeOf(t)}e.exports=_getPrototypeOf},function(e,t){e.exports=function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){function _defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),e}},function(e,t){e.exports=function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t,n){var r=n(8);e.exports=function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){r(e,t,n[t])})}return e}},function(e,t,n){var r=n(6),o=n(3);e.exports=function _possibleConstructorReturn(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function _typeof2(e){return(_typeof2="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof2(e){return typeof e}:function _typeof2(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _typeof(t){return"function"==typeof Symbol&&"symbol"===_typeof2(Symbol.iterator)?e.exports=_typeof=function _typeof(e){return _typeof2(e)}:e.exports=_typeof=function _typeof(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":_typeof2(e)},_typeof(t)}e.exports=_typeof},function(e,t,n){var r=n(11);e.exports=function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t){e.exports=function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t,n){n(0);var r=n(10);function _get(t,n,o){return"undefined"!=typeof Reflect&&Reflect.get?e.exports=_get=Reflect.get:e.exports=_get=function _get(e,t,n){var o=r(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}},_get(t,n,o||t)}e.exports=_get},function(e,t,n){var r=n(0);e.exports=function _superPropBase(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=r(e)););return e}},function(e,t){function _setPrototypeOf(t,n){return e.exports=_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(e,t){return e.__proto__=t,e},_setPrototypeOf(t,n)}e.exports=_setPrototypeOf},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r),i=n(2),s=n.n(i),l=n(5),a=n.n(l),c=n(3),u=n.n(c),f=n(0),p=n.n(f),d=n(9),h=n.n(d),_=n(7),y=n.n(_),v=n(4),m=n.n(v),b=function(){function EventEmitter(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];o()(this,EventEmitter),this._listeners=new Map(e),this._middlewares=new Map}return s()(EventEmitter,[{key:"listenerCount",value:function listenerCount(e){return this._listeners.has(e)?this._listeners.get(e).length:0}},{key:"removeListeners",value:function removeListeners(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];null!==t?Array.isArray(t)?name.forEach(function(t){return e.removeListeners(t,n)}):(this._listeners.delete(t),n&&this.removeMiddleware(t)):this._listeners=new Map}},{key:"middleware",value:function middleware(e,t){var n=this;Array.isArray(e)?name.forEach(function(e){return n.middleware(e,t)}):(Array.isArray(this._middlewares.get(e))||this._middlewares.set(e,[]),this._middlewares.get(e).push(t))}},{key:"removeMiddleware",value:function removeMiddleware(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null!==t?Array.isArray(t)?name.forEach(function(t){return e.removeMiddleware(t)}):this._middlewares.delete(t):this._middlewares=new Map}},{key:"on",value:function on(e,t){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(Array.isArray(e))e.forEach(function(e){return n.on(e,t)});else{var o=(e=e.toString()).split(/,|, | /);o.length>1?o.forEach(function(e){return n.on(e,t)}):(Array.isArray(this._listeners.get(e))||this._listeners.set(e,[]),this._listeners.get(e).push({once:r,callback:t}))}}},{key:"once",value:function once(e,t){this.on(e,t,!0)}},{key:"emit",value:function emit(e,t){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];e=e.toString();var o=this._listeners.get(e),i=null,s=0,l=r;if(Array.isArray(o))for(o.forEach(function(a,c){r||(i=n._middlewares.get(e),Array.isArray(i)?(i.forEach(function(n){n(t,function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null!==e&&(t=e),s++},e)}),s>=i.length&&(l=!0)):l=!0),l&&(a.once&&(o[c]=null),a.callback(t))});-1!==o.indexOf(null);)o.splice(o.indexOf(null),1)}}]),EventEmitter}(),g=n(8),w=n.n(g),k=n(6),O=n.n(k),E=function isFunction(e){return"function"==typeof e},x=function isString(e){return"string"==typeof e||!!e&&"object"===O()(e)&&"[object String]"===Object.prototype.toString.call(e)},P=function isNode(e){try{return Node.prototype.cloneNode.call(e,!1),!0}catch(e){return!1}},S=function isNodeList(e){return NodeList.prototype.isPrototypeOf(e)},j=/^(?:f(?:alse)?|no?|0+)$/i,C=function uuid(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"")+([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,function(e){return(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)})},A=function detectSupportsPassive(){var e=!1;if("undefined"!=typeof window&&"function"==typeof window.addEventListener){var t=Object.defineProperty({},"passive",{get:function get(){return e=!0,!0}}),n=function noop(){};window.addEventListener("testPassive",n,t),window.removeEventListener("testPassive",n,t)}return e},T=function querySelectorAll(e,t){return E(e)?e(t||("undefined"!=typeof document?document:null)):x(e)?t&&P(t)?t.querySelectorAll(e):"undefined"!=typeof document?document.querySelectorAll(e):null:P(e)?[e]:S(e)?e:null},q=function optionsFromDataset(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return P(e)&&e.dataset?Object.keys(e.dataset).filter(function(e){return Object.keys(t).includes(e)}).reduce(function(t,n){return m()({},t,w()({},n,e.dataset[n]))},{}):{}};"undefined"==typeof Node||Node.prototype.on||(Node.prototype.on=function(e,t){var n=this;return Array.isArray(e)||(e=e.split(" ")),e.forEach(function(e){n.addEventListener(e.trim(),t,!!A()&&{passive:!1})}),this}),"undefined"==typeof NodeList||NodeList.prototype.on||(NodeList.prototype.on=function(e,t){return this.forEach(function(n){n.on(e,t)}),this}),"undefined"==typeof Node||Node.prototype.off||(Node.prototype.off=function(e,t){var n=this;return Array.isArray(e)||(e=e.split(" ")),e.forEach(function(e){n.removeEventListener(e.trim(),t,!!A()&&{passive:!1})}),this}),"undefined"==typeof NodeList||NodeList.prototype.off||(NodeList.prototype.off=function(e,t){return this.forEach(function(n){n.off(e,t)}),this});var L=function(e){function Component(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(o()(this,Component),(t=a()(this,p()(Component).call(this))).element=x(e)?t.options.container.querySelector(e):e,!t.element)throw new Error("An invalid selector or non-DOM node has been provided for ".concat(t.constructor.name,"."));return t.element[t.constructor.name]=t.constructor._interface.bind(u()(t)),t.element[t.constructor.name].Constructor=t.constructor.name,t.id=C(t.constructor.name+"-"),t.options=m()({},r,n,q(t.element,r)),t}return y()(Component,e),s()(Component,null,[{key:"attach",value:function attach(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=new Array;return null===t?o:(n=m()({},r,n,q(this.element,r)),(T(t,n.container)||[]).forEach(function(r){void 0===r[e.constructor.name]?o.push(new e(r,m()({selector:t},n))):o.push(r[e.constructor.name])}),o)}},{key:"_interface",value:function _interface(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("string"==typeof e){if(void 0===this[e])throw new TypeError('No method named "'.concat(e,'"'));return this[e](e)}return this}}]),Component}(b),N={allowMultiple:!1,container:"undefined"!=typeof document?document:null};n.d(t,"default",function(){return M});var M=function(e){function bulmaCollapsible(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return o()(this,bulmaCollapsible),(t=a()(this,p()(bulmaCollapsible).call(this,e,n,N))).onTriggerClick=t.onTriggerClick.bind(u()(t)),t.onTransitionEnd=t.onTransitionEnd.bind(u()(t)),t._init(),t}return y()(bulmaCollapsible,e),s()(bulmaCollapsible,[{key:"_init",value:function _init(){if(this._originalHeight=this.element.style.height,this._parent=this.element.dataset.parent,this._parent){var e=this.options.container.querySelector("#".concat(this._parent));this._siblings=T(this.options.selector,e)||[]}this._triggers=this.options.container.querySelectorAll('[data-action="collapse"][href="#'.concat(this.element.id,'"], [data-action="collapse"][data-target="').concat(this.element.id,'"]'))||null,this._triggers&&this._triggers.on("click touch",this.onTriggerClick),this._transitionEvent=function whichTransitionEvent(){var e=document.createElement("fakeelement"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var n in t)if(void 0!==e.style[n])return t[n]}(),this._transitionEvent&&this.element.on(this._transitionEvent,this.onTransitionEnd),this.element.classList.contains("is-active")?this.expand():this.collapse()}},{key:"destroy",value:function destroy(){this._triggers&&this._triggers.off("click touch",this.onTriggerClick,!1)}},{key:"collapsed",value:function collapsed(){return this._collapsed}},{key:"expand",value:function expand(){var e=this;(void 0===this._collapsed||this._collapsed)&&(this.emit("before:expand",this),this._collapsed=!1,this._parent&&!function BooleanParse(e){return!j.test(e)&&!!e}(this.options.allowMultiple)&&this._siblings.forEach(function(t){t.isSameNode(e.element)||t.bulmaCollapsible&&t.bulmaCollapsible("close")}),this.element.style.height=this.element.scrollHeight+"px",this.element.classList.add("is-active"),this.element.setAttribute("aria-expanded",!0),this._triggers&&this._triggers.forEach(function(e){e.classList.add("is-active")}),this.emit("after:expand",this))}},{key:"open",value:function open(){this.expand()}},{key:"collapse",value:function collapse(){void 0!==this._collapsed&&this._collapsed||(this.emit("before:collapse",this),this._collapsed=!0,this.element.style.height=0,this.element.classList.remove("is-active"),this.element.setAttribute("aria-expanded",!1),this._triggers&&this._triggers.forEach(function(e){e.classList.remove("is-active")}),this.emit("after:collapse",this))}},{key:"close",value:function close(){this.collapse()}},{key:"onTriggerClick",value:function onTriggerClick(e){e.preventDefault(),this.collapsed()?(e.currentTarget.classList.add("is-active"),this.expand()):(e.currentTarget.classList.remove("is-active"),this.collapse())}},{key:"onTransitionEnd",value:function onTransitionEnd(e){this._collapsed||(this.element.style.height=this._originalHeight)}}],[{key:"attach",value:function attach(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".is-collapsible",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return h()(p()(bulmaCollapsible),"attach",this).call(this,e,t,N)}}]),bulmaCollapsible}(L)}]).default}); ^ Invalid CSS after "!": expected 1 selector or at-rule, was "!function webpackUn"

I don't think it is supposed to behave this way. BTW, I am not using Webpack.