Importing dist/scss/selectize.bootstrap4.scss requires devDependency on bootstrap4 to be installed

[greenfork]

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

I don't know how to correctly import scss file from dist.

Steps to reproduce:

1. yarn add selectize.js
2. In some scss file @import 'selectize/dist/scss/selectize.bootstrap4';
3. Run webpack, in my case on rails it is bin/webpack-dev-server

Expected result:

Everything compiles successfully.

Actual result:

ERROR in ./app/javascript/src/hub/application.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/resolve-url-loader??ref--8-3!./node_modules/sass-loader/dist/cjs.js??ref--8-4!./app/javascript/src/hub/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "../../node_modules/bootstrap4/scss/functions";
^
      File to import not found or unreadable: ../../node_modules/bootstrap4/scss/functions.
      in /home/grfork/work/hub/node_modules/selectize/dist/scss/selectize.bootstrap4.scss (line 1, column 1)
Error:
@import "../../node_modules/bootstrap4/scss/functions";
^
      File to import not found or unreadable: ../../node_modules/bootstrap4/scss/functions.
      in /home/grfork/work/hub/node_modules/selectize/dist/scss/selectize.bootstrap4.scss (line 1, column 1)
    at options.error (/home/grfork/work/hub/node_modules/node-sass/lib/index.js:291:26)
ℹ ｢wdm｣: Failed to compile.

troubling line is

@import "../../node_modules/bootstrap4/scss/functions";

In selectize/dist/scss/selectize.bootstrap4.scss there's import

@import "../../node_modules/bootstrap4/scss/functions";

which resolves to

project_root/node_modules/selectize/node_modules/bootstrap4/scss/

which as I understand is supposed to be installed via

  "devDependencies": {
    "@types/jquery": "^3.5.4",
    "bootstrap-sass": "^3.4.1",
    "bootstrap2": "npm:bootstrap-2.3.2@1.0.0",
    "bootstrap3": "npm:bootstrap@3.4.1",
    "bootstrap4": "npm:bootstrap@4.5.3",

in package.json of selectize.js. My understanding is that it is impossible to selectively install devDependency of a package.

How do I import bootstrap4.scss file?

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[greenfork]

Afaik this issue didn't go anywhere

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[greenfork]

Afaik this issue didn't go anywhere

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[risadams]

This is an intentional design as building the scss from src is meant to make use of as much of the native bootstrap code as possible.

In a downstream project, if you need to use the files from source, you will also need to reference a DevDependency on the bootstrap version you are using.

Referencing the compiled version from dist does not have this dependency.

All that being said, I totally understand the frustration, it's probably worth a refactor on our end to pull the bs library locally during the build to avoid this, and I will try to make that a priority for our next patch version

[greenfork]

Thanks a lot!