SCSS Files Import Paths Incorrect In All Plugins

[envision]

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-base/styles/bootstrap4-definition.scss';

@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.

[envision]

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

[Ashokkumar Balasubramanian]

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. 

 

Documentation Link: https://ej2.syncfusion.com/vue/documentation/getting-started/vue-sass/ 

 

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. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/145155/ze/Vue-CLI-358310376.zip 

 

Please check the sample and get back to us, if you need any further assistance on this. 

 

Regards, 

Ashokkumar B.