bulma-calendar: Import problem

Hi, When I tried to use your library with webpack I met problem, that $radius-small is not defined, when I tried to bundle it with node-sass loader. I found that if you sass module have dependencies from other npm package you need to use special tilde import to define dependencies, so it will be possible to load modules in right order.

In case of bulma-calendar it was needed to add @import "~bulma/bulma" on top line of bulma-calendar.sass, after that I was able to bundle bulma-calendar with webpack without problem.

Can you take a look into this problem? Anyway thanks for great library!

Sorry can’t find in doc about this import, but it defined somewhere in this package: https://npmjs.org/package/node-sass And link to discussion about implement this: https://github.com/sass/sass/issues/2350

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 19 (9 by maintainers)

Most upvoted comments

this has worked for me:

import bulmaCalendar from 'bulma-calendar/dist/js/bulma-calendar.min'

@import "~bulma-calendar/dist/css/bulma-calendar.min.css";

mokhosh on Jun 13, 2018

Hi, sorry for the inconvenience I’ll fix this issue this weekend.

Wikiki on Jun 7, 2018

thanks @mokhosh

Wikiki on Jun 13, 2018

Changed to v2.0.0 and 2.0.1, still with same problems… .scss:

// Import the rest of Bulma
@import "~bulma/bulma";
// Import Bulma Extensions
@import "~bulma-calendar/dist/css/bulma-calendar";

.js:

require('bulma-calendar/dist/js/bulma-calendar.js');

document.addEventListener('DOMContentLoaded', function () {
    var date = new bulmaCalendar(document.querySelector('.sr-date'), {
        dataFormat: 'd MM yyyy'
    });

    var datePickers = bulmaCalendar.attach('[type="date"]', {
        overlay: true,
        minDate: '2018-01-01',
        maxDate: '2018-12-31',
        dateFormat: 'yyyy-mm-dd'
    });
});

package.json:

 "dependencies": {
        ...
        "bulma": "^0.7.1",
        "bulma-calendar": "^2.0.0",
        "bulma-extensions": "^1.0.14",
        ...
}

Ninos on Jun 9, 2018

sass is within dsit/css/ or src/sass directory

Wikiki on Jun 9, 2018

+1 Having this issue too, as I’m trying to get any bulma-calendar JavaScript working.

seanodotcom on Apr 10, 2018

If you installed bulma first tyen how do you import it ? Using css ? If yes then import the css extension file (by default it’s the sass file but if you use the import rule using css file existing into dist folder then it’ll work)

Wikiki on Mar 29, 2018