Closed hxgong closed 3 years ago
Hello there, @hxgong ,
Can you please let us know which NodeJS version you are using?
Best, Manu
Hi @EINazare I am using node 12.18.3 Thanks
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
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
Hello again, @hxgong ,
We've tested the product. Everything works as expected. Please provide us with the following video:
Best, Manu
@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.
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
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
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
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.
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
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
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
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
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
Did you solve the issue. If yes how?. I am currently having same issue compiling paper-dashboard
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?
Likewise @gtusar, I am getting very same error.
You have to use node-sass
which is deprecated but the error goes away.
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.
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.
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.
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