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. Image for the cookie policy date
close icon

SCSS Files Import Paths Incorrect In All Plugins

I'm unable to use almost any of your plugins SCSS files as imports in my main SCSS file.

Let me make an example. In file node_modules/@syncfusion/ej2-calendars/styles/calendar/bootstrap4.scss contents are:

@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
@import 'bootstrap4-definition.scss';
@import 'icons/bootstrap4.scss';
@import 'all.scss';

There is no ej2-base folder relative to this file, so that is an incorrect syntax/path. As you are already using @synfusion alias, I think you should prepend that to all such import statements, which are pointing to separate packages.

2 Replies

EN envision June 10, 2019 02:23 PM UTC

Also getting loads of these errors:

Top-level selectors may not contain the parent selector "&"

For example in this file: @syncfusion/ej2-calendars/styles/calendar/_layout.scss

AB Ashokkumar Balasubramanian Syncfusion Team June 11, 2019 01:24 PM UTC

Hi Janne Kurkinen, 
Good day to you. 
We have checked your provided styles code block reference at our end. For that code block, you have referred the inner level component styles in SCSS, there is no need for this case. You can follow the below help document to render our calendar component using Vue cli with SCSS concept. 
Code Reference:  
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap4.scss"; 
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/bootstrap4.scss"; 
Note: Based on packages, specify the corresponding styles. 
Please check the sample and get back to us, if you need any further assistance on this. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon