search

creativetimofficial / ct-paper-dashboard-pro-react

17 stars 6 forks source link

SassError: Top-level selectors may not contain the parent selector "&". #15

Closed hxgong closed 3 years ago

hxgong commented 3 years ago

Version

1.2.0

Reproduction link

http://localhost

Operating System

windows

Device

windows

Browser & Version

chrome

Steps to reproduce

error in ./src/main/webapp/content/scss/paper-dashboard.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Top-level selectors may not contain the parent selector "&". ╷ 25 │ &::-moz-placeholder {@content; } // Firefox │ ^^^^^^^^^^^^^^^^^^^^ ╵ src\main\webapp\content\scss\paper-dashboard\mixins_inputs.scss 25:3 placeholder() src\main\webapp\content\scss\paper-dashboard_inputs.scss 1:1 @import

What is expected?

scss files can be compiled

What is actually happening?

compile error

Solution

Additional comments

einazare commented 3 years ago

Hello there, @hxgong ,

Can you please let us know which NodeJS version you are using?

Best, Manu

hxgong commented 3 years ago

Hi @EINazare I am using node 12.18.3 Thanks

einazare commented 3 years ago

Hi @EINazare I am using node 12.18.3 Thanks

Hello again, @hxgong ,

Well, I believe we have found the issue. Please go on the official NodeJS download page, and download NodeJS version 14.15.5 LTS: https://nodejs.org/en/ After you've installed that version, please delete node_modules and package-lock.json from our product and run again the install script. That should do the trick.

I'll leave the issue open with the question label on it, until you try the above solution, if everything is ok, we'll close the issue.

Best, Manu

hxgong commented 3 years ago

Hi @EINazare I am getting the same error after upgrade to node 14.15.5.

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Top-level selectors may not contain the parent selector "&". ╷ 25 │ &::-moz-placeholder {@content; } // Firefox │ ^^^^^^^^^^^^^^^^^^^^ ╵ src\main\webapp\content\scss\paper-dashboard\mixins_inputs.scss 25:3 placeholder() src\main\webapp\content\scss\paper-dashboard_inputs.scss 1:1 @import

einazare commented 3 years ago

Hello again, @hxgong ,

We've tested the product. Everything works as expected. Please provide us with the following video:

Best, Manu

hxgong commented 3 years ago

@EINazare

Just to be clear. I got the scss compiled by comment out @import 'paper-dashboard/inputs'; in paper-dashboard.scss And it is working for node 12.18.3.

I don't have issue to run "npm run start" with the package out of the box. I have issue to bring it into my application. I only brought the scss folder into my application. Everything seems working fine except the inputs subfolder. Do you think I need the css folder as well? Although I think it is generated from the scss.

einazare commented 3 years ago

Hello again, @hxgong ,

But if you change your NodeJS version with the latest LTS one, and do the changes which you did, does the error still occur?

Best, Manu

hxgong commented 3 years ago

Hi @EINazare

This error is irrelevant with the version of node (12 or 14).

"Just to be clear. I got the scss compiled by comment out @import 'paper-dashboard/inputs'; in paper-dashboard.scss And it is working for node 12.18.3."

Thanks

einazare commented 3 years ago

Hello again, @hxgong ,

I am not sure if this is quite ok. I think your inputs and form controls will stop looking like those from our live preview.

Best, Manu

hxgong commented 3 years ago

Ideally, I want them since all the widgets are matching the same design. I don't mind to put in the code change if you can let me know what needs to be done.

einazare commented 3 years ago

Ideally, I want them since all the widgets are matching the same design. I don't mind to put in the code change if you can let me know what needs to be done.

That's the problem. I do not know what your issue is, since on our end, the project/product works as expected. If you wish, you can share with me your project, and I'll try to find a solution. Alternatively, maybe you can at least share with me your package.json? And maybe I will find the issue there?

Best, Manu

hxgong commented 3 years ago

Hi @EINazare,

If you can shed some light on the stack trace, that will be great.

error in ./src/main/webapp/content/scss/paper-dashboard.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Top-level selectors may not contain the parent selector "&". ╷ 25 │ &::-moz-placeholder {@content; } // Firefox │ ^^^^^^^^^^^^^^^^^^^^ ╵ src\main\webapp\content\scss\paper-dashboard\mixins_inputs.scss 25:3 placeholder() src\main\webapp\content\scss\paper-dashboard_inputs.scss 1:1 @import

einazare commented 3 years ago

Hello again, @hxgong ,

Maybe you can only comment the following:

@mixin placeholder() {
  &::-moz-placeholder {@content; } // Firefox
  &:-ms-input-placeholder {@content; } // Internet Explorer 10+
  &::-webkit-input-placeholder  {@content; } // Safari and Chrome
}

From inside src/assets/scss/paper-dashboard/mixins/_inputs.scss.

Best, Manu

hxgong commented 3 years ago

I made the change below to paper-dashboard\mixins_inputs.scss @mixin placeholder() { //&::-moz-placeholder { // @content; //} // Firefox //&:-ms-input-placeholder { // @content; //} // Internet Explorer 10+ //&::-webkit-input-placeholder { // @content; //} // Safari and Chrome @content; }

I am getting this stack trace now. ERROR in ./src/main/webapp/content/scss/paper-dashboard.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./src/main/webapp/content/scss/paper-dashboard.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Declarations may only be used within style rules. ╷ 2 │ color: $dark-gray; │ ^^^^^^^^^^^^^^^^^ ╵ src\main\webapp\content\scss\paper-dashboard_inputs.scss 2:3 @content src\main\webapp\content\scss\paper-dashboard\mixins_inputs.scss 34:3 placeholder() src\main\webapp\content\scss\paper-dashboard_inputs.scss 1:1 @import

einazare commented 3 years ago

Hello there, @hxgong ,

Is it safe to close this issue? If not, please provide me with the necessary steps to reproduce your issue.

Best, Manu

zimimick commented 2 years ago

Did you solve the issue. If yes how?. I am currently having same issue compiling paper-dashboard

gregor-tusar commented 2 years ago

I have similar issue inporting .sass file in now-ui-kit-pro-react-v1.5.0:

SassError: Top-level selectors may not contain the parent selector "&".
  ╷
2 │     &.menu-on-left .navbar-translate

How to solve it?

piotrpoz commented 2 years ago

Likewise @gtusar, I am getting very same error.

gregor-tusar commented 2 years ago

You have to use node-sass which is deprecated but the error goes away.

piotrpoz commented 2 years ago

Hi @gtusar You are right but that's a workaround not a fix. Doesn't sound like a PRO at all, especially that it comes with a default setup of a downloadable package from Creative Tim.

gregor-tusar commented 2 years ago

I know. Also I was disappointed when I found out that the theme relies on quite some packages that are deprecated. I also use react 17 but some dependencies are only compatible with 16.

utunga commented 2 years ago

Yeah this is not a fix. With M1 macbooks and for many people on windows node-sass is not an acceptable dependency - literally almost impossible to get it to work - so "sass" (as in not node-sass) - compatible solutions are really required at this point.