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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SCSS issue in Essential JS 2

Thread ID:

Created:

Updated:

Platform:

Replies:

143711 Mar 29,2019 07:21 AM UTC Jun 8,2020 08:35 AM UTC Angular - EJ 2 13
loading
Tags: General
Lucas R Vogel
Asked On March 29, 2019 07:21 AM UTC

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 [Syncfusion]
Replied On April 2, 2019 12:32 PM UTC


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. 

 

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


Regards, 
Mydeen S N 


Lucas R Vogel
Replied On April 2, 2019 01:43 PM UTC

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 [Syncfusion]
Replied On April 3, 2019 01:26 PM UTC

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
Replied On April 3, 2019 07:10 PM UTC

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



Mydeen S N [Syncfusion]
Replied On April 4, 2019 10:17 AM UTC

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 
 
 
 
  1. 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.
  2. 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. 
 
 
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
Replied On May 21, 2019 04:24 PM UTC

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 [Syncfusion]
Replied On May 22, 2019 11:27 AM UTC

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. 
 
 
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.  
 
 
Please get back to us if you require any further assistance on this. 
 
Regards, 
Jesus Arockia Sankaran S 
 


Moses Fetters
Replied On May 23, 2019 02:02 AM UTC

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 [Syncfusion]
Replied On May 23, 2019 11:02 AM UTC

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
Replied On May 31, 2019 09:53 AM UTC

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 [Syncfusion]
Replied On June 4, 2019 11:30 AM UTC

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. 


We hope that this may be helpful to you. 

Regards, 
Jesus Arockia Sankaran S 
 


Jakub
Replied On June 7, 2020 05:07 PM UTC


Jesus Arockia Sankaran S [Syncfusion]
Replied On June 8, 2020 08:35 AM UTC

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 


CONFIRMATION

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