SCSS issue in Essential JS 2

[Lucas R Vogel]

When going through the process of installing the SCSS for Syncfusion (using npm), I ran into an issue using it in my SCSS file. The error:

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

I had to spend a good hour or so tweaking the SCSS files to make them compile successfully. I'm hoping none of the changes will impact the controls negatively, but I wanted to raise awareness that this is indeed an issue with the controls. 

scss version - 1.17.3

"@syncfusion/ej2": "^16.4.55"

[Mydeen S N]

Hi Lucas, 

Greeting from Syncfusion support. 

Angular cli project has default support for sass  compilation option, we can create the angular-cli application with scss option enabled using below documentation link. 

 https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/#create-a-new-application 

 

We have prepared a simple angular cli application with scss compilation. Please find the sample in below link. 

 

https://github.com/SyncfusionExamples/ej2-angular-scss 

Regards, 

Mydeen S N 

[Lucas R Vogel]

This does not address the fact that the jQuery version of the product (the one I want to use) has breaking issues in the SCSS. 

I'll be able to work around it for the time being, but I don't feel like using this addresses the issue. 

[Mydeen S N]

Hi Lucas, 

 

Sorry for the inconvenience caused. Could you please provide the following the details which will be helpful for us to proceed further. 

 

1. Which version of JavaScript platform you have used in your application either Essential JS 1 for Angular or Essential JS2 for Angular.
2. Since Essential JS 2  has no jquery dependencies. We suspect that you are using Essential JS 1 components.

 

 

Regards, 

Mydeen S N 

[Lucas R Vogel]

I'm using Essential JS 2. I downloaded the ej2 @syncfusion NPM package as described in the documentation here:

https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/client-side-resource/

[Mydeen S N]

Hi Lucas, 

 

Thanks for the update. 

 

We have provided angular -cli sample which is based on the platform type you have specified in the forum. 

 We have  created a simple sample by using  gulp-sass  compiler  in asp core and try to reproduce the reported issue, but  scss compilation of the ej2 package was successful without any failure. Please follow the below steps to include the gulp-sass compilation in the application. 

 

1. In addition to Syncfusion EJ2 packages, install gulp and gulp-sass packages using below commands.

Gulp Installation - npm install gulp —save 

 

Glob Installation - npm install gulp-sass —save 

 

 

 

2. Open the Source Explorer and right click on the application name. Then, select “Add New Item” menu item to open the “Add New Item” window.
3. Select “ASP.NET Core” on the left side Tree View and select “JavaScript File” in the “Add New Item” window. It will include a js file in the root folder of the ASP.NET Core web application. Rename the js file as “gulpfile.js”.

 

 

4 .Copy the following code snippet and paste it in gulpfile.js for automatically sass compiler process while building the web application 

 

 

/// <binding BeforeBuild='sass'/> 

 

var gulp = require("gulp"), 

    sass = require("gulp-sass"); 

 

// other content removed 

 

gulp.task("sass", function () { 

    return gulp.src('Styles/default.scss') 

        .pipe(sass({includePaths :"node_modules/@syncfusion"})) 

        .pipe(gulp.dest('wwwroot/css')); 

}); 

 

Please find the same in below sample link. 

 

Sample link : http://www.syncfusion.com/downloads/support/forum/143711/ze/WebApplication201438570617.zip 

 

If the issue with scss compilation still persist ,please share additional details about the scss compiler you have used in the application which will be helpful for us to proceed further. 

 

Regards, 

Mydeen S N 

[Moses Fetters]

I've had the same issue when running against angular 8 rc4 using  "@syncfusion/ej2-angular-grids": "^17.1.47",

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  .e-bigger #{&}.e-tooltip-wrap .e-tip-content,

 ^

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

      ╷

15580 │ ┌   .e-bigger #{&}.e-tooltip-wrap .e-tip-content,

15581 │ │   &#{&}.e-tooltip-wrap.e-bigger .e-tip-content {

      │ └───────────────────────────────────────────────^

      ╵

  src\app\styles\syncfusion\material.scss 15580:3  @content

  src\app\styles\syncfusion\material.scss 95:5     export-module()

  src\app\styles\syncfusion\material.scss 15508:1  @import

  stdin 19:9         

[Jesus Arockia Sankaran S]

Hi Moses, 

 

Thanks for contacting Syncfusion support.  

 

We have checked the reported issue, and found that angular-cli v8.0.0-rc.4 removed node-sass. For more information refer the below GitHub issue link. 

 

https://github.com/angular/angular-cli/issues/14497 

 

We recommend you to install the node-sass package manually, and ensure that typescript version should be greater than 3.4.1 to resolve this issue.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/143711/ze/angular-sass101441851.zip 

 

Please get back to us if you require any further assistance on this. 

 

Regards, 

Jesus Arockia Sankaran S 

 

[Moses Fetters]

Are there plans to fix this in the future,  so we don't need to rely on node sass, and have a better integration story with angular 8

[Jesus Arockia Sankaran S]

Hi Moses,  

 

Thanks for your reply.  

 

We currently do not have any immediate plan to remove node-sass dependency. However, we validate and consider this once the stable version of Angular CLI version 8 is out. 

 

Please get back to us if you require any further assistance on this. 

 

Regards, 

Jesus Arockia Sankaran S 

[Rosey Smith]

I am also facing this type of error on my device. It is showing Asus Error Code 55. Do you have any idea how can I solve this issue?

[Jesus Arockia Sankaran S]

Hi Rosey, 

Thanks for contacting Syncfusion support. 

We have gone through the reported issue and it does not seem to be related to our Syncfusion components. However, we suggest you refer this error to the ASUS forum for further clarification. 

Link: https://rog.asus.com/forum/showthread.php?24330-Error-code-55-on-boot 

We hope that this may be helpful to you. 

Regards, 

Jesus Arockia Sankaran S 

 

[Jakub]

Hello guys,

this topic may help you https://www.syncfusion.com/forums/152447/sass-top-level-selectors-may-not-contain-the-parent-selector#264020

Regards,

Jakub

[Jesus Arockia Sankaran S]

Hi Jakub, 

Thank you for the information.  

We have went through the provided details and we grateful for your suggestion to resolve the SCSS compilation issue. We will consider your suggestion while fixing this compilation issue.  

Regards, 

Jesus Arockia Sankaran S