We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Webpack Compatibility

Thread ID:





140638 Oct 29,2018 07:54 PM UTC Oct 31,2018 01:25 PM UTC ASP.NET Core - EJ 2 2
Tags: Common
Dan Johnson
Asked On October 29, 2018 09:04 PM UTC

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.

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";

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"'.
Please delete or rename all but one of these files.

Dan Johnson
Replied On October 30, 2018 01:17 PM UTC

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 [Syncfusion]
Replied On October 31, 2018 01:25 PM UTC

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. 

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. 

Kumaresan S 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon