Webpack Compatibility

[Dan Johnson]

Your SCSS files do not seem to be compatible with bootstrap 4 even though I swear your marketing info/documentation says it is. Trying to compile your SCSS files with Bootstrap 4 triggers a stream of errors about missing variables.

EDIT:

After further digging, I have this narrowed down to a sass/webpack issue.  Because you include both the css and the scss in the source files, webpack does not know which file to use since you don't qualify underscores or extensions in your SASS files.  This is the output of webpack trying to compile just the button scss:

//my scss file

@import "../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap";

//error

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@import 'ej2-base/styles/bootstrap';
@import "definition";
@import "bootstrap-definition";
@import "all";
^
      It's not clear which file to import for '@import "ej2-base/styles/bootstrap"'.
Candidates:
  ej2-base/styles/bootstrap.scss
  ej2-base/styles/bootstrap.css
Please delete or rename all but one of these files.

[Dan Johnson]

After some more trail and error in figuring out the bootstrap style dependencies, ej2-buttons/styles/button/_bootstrap-definition.scss is missing an import of @import "definition.scss"; at the top of the file.  The _bootstrap_definition.scss is referenced by other plugins without first adding a reference to the definition file.  It appears other base elements use this strategy of having the material/fabric/bootstrap definition file import the base _definition.scss.  Not sure why your 16.3.25 release removed that value from the imports, but I filed a bug here:https://github.com/syncfusion/ej2-buttons/issues/2

[Kumaresan Subramani]

Hi Dan Johnson, 

   We have created Webpack + Sass Application for Syncfusion Component  Sass with Bootstrap 4 Sass. We haven’t faced issues also we have attached sample for your convenient Please refer. 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/wepack_compatability-645534242.zip 

We are providing CSS & SASS both in all packages but this won’t affect any other.  We suspect that you haven’t provide the includePaths for sass loader. If you have use node-sass , you have to provide this otherwise you will get a script error. 

  { 

            loader: "sass-loader", 

              options: { 

              includePaths: ["./node_modules/@syncfusion"] 

            } 

    } 

 

Please let us know if you have any concern. 

Regards, 

Kumaresan S