Cannot import selectize scss styles into my project

[kkozlik]

I did:

• Search for if my issue has already been submitted
• Make sure I'm reporting something precise that needs to be fixed
• Give my issue a descriptive and concise title
• Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo on the Selectize docs)
• Indicate precise steps to reproduce in numbers and the result,
  like below

First, I cannot find any documentation how to correctly include selectize into my project (with exception of brief example on https://selectize.dev/docs.html but that does not mention scss).

I am trying to include selectize into my scss file with:

@import "node_modules/@selectize/selectize/dist/scss/selectize.bootstrap4.scss";

But the compilation ends with this error:

Error in plugin "sass"
Message:
    node_modules/@selectize/selectize/dist/scss/selectize.scss
Error: File to import not found or unreadable: ../plugins/drag_drop/plugin.scss.
        on line 93 of node_modules/@selectize/selectize/dist/scss/selectize.scss
        from line 60 of node_modules/@selectize/selectize/dist/scss/selectize.bootstrap4.scss
        from line 5 of src/scss/selectize.scss
        from line 86 of src/scss/sbc-gui.scss
>> @import "../plugins/drag_drop/plugin.scss";

The dist/scss/selectize.scss file contain wrong paths for importing plugins. If I either fix those:

@import "../plugins/drag_drop/plugin.scss";
@import "../plugins/dropdown_header/plugin.scss";
@import "../plugins/optgroup_columns/plugin.scss";
@import "../plugins/remove_button/plugin.scss";
@import "../plugins/clear_button/plugin.scss";

to

@import "./plugins/drag_drop.scss";
@import "./plugins/dropdown_header.scss";
@import "./plugins/optgroup_columns.scss";
@import "./plugins/remove_button.scss";
@import "./plugins/clear_button.scss";

or if I use scss file form src folder instead of dist:

@import "node_modules/@selectize/selectize/src/scss/selectize.bootstrap4.scss";

I got another error:

Error in plugin "sass"
Message:
    node_modules/@selectize/selectize/src/scss/selectize.scss
Error: Invalid CSS after "...top: round(math": expected expression (e.g. 1px, bold), was ".div(-1 * $select-a"
        on line 355 of node_modules/@selectize/selectize/src/scss/selectize.scss
        from line 60 of node_modules/@selectize/selectize/src/scss/selectize.bootstrap4.scss
        from line 6 of src/scss/selectize.scss
        from line 86 of src/scss/sbc-gui.scss
>>     margin-top: round(math.div(-1 * $select-arrow-size, 2));

   --------------------------^

What am I doing wrong? Do I have to use different sass compiler? Mine is node-sass. Or do I have to set some variables in my scss before importing selectize?

[kkozlik]

I am trying to migrate my project to sass node module instead of node-sass. With this compiler it seems I am able to import:
node_modules/@selectize/selectize/src/scss/selectize.bootstrap4.scss but that one from dist directory still does not work:
node_modules/@selectize/selectize/dist/scss/selectize.bootstrap4.scss

The error is related to the wrong plugin path I mentioned above:

Error in plugin "sass"
Message:
    node_modules/@selectize/selectize/dist/scss/selectize.scss
Error: Can't find stylesheet to import.
   ╷
93 │ @import "../plugins/drag_drop/plugin.scss";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@selectize/selectize/dist/scss/selectize.scss 93:9             @import
  node_modules/@selectize/selectize/dist/scss/selectize.bootstrap4.scss 60:9  @import
  src/scss/selectize.scss 5:9                                                 @import
  src/scss/sbc-gui.scss 86:9                                                  root stylesheet

IMO it would be worth to add some piece of doc what sass compiler have to be used.

[risadams]

this is a bug; good catch. I will get a fix started.
The problem is that in the dist build the plugins directory is folded into the same path level as scss instead of being on dir higher like it is in the src directory.

We do the sass module, I can also add that to the docs

[risadams]

done. This will be fixed when v0.15 is released.