Yes. I found a couple issues related to SASS files, but they all seemed to make assumptions about setup and environment.
Tell us about the problem
For the life of me I can't figure out how to use .scss files in Playground. It seems like it should be possible - .scss appears as an option when creating new files, there's references to SASS in the docs, and if you download the playground code the package.json contains SASS-related packages.
But I literally cannot figure out the right magic combination of files, imports, where the imports go, etc. to light it up in my own Playground application. I'm using the Nativescript-Vue template if that makes a difference.
Did you try it outside of {N} Playground?
No - I'm specifically interested in getting SASS files to work in the playground.
Which browser are you using?
Edge
Are there any errors/warnings logged in your browser console?
If I add foo.scss to the app folder and add variations of @import "./foo.scss"; (without an extension, with a .css extension, with various ./ or ~/, etc.) to the app.css folder I always see ERROR: Error: Could not load CSS from ./foo.css: TypeError: Expected module identifier to be a string.
I'm sure I'm not adding the import in the right place, or in the right way, or something. I'm not a JS developer and my knowledge of webpack and the npm build ecosystem is limited. I was excited about Playground because it lets me ignore most of the tooling stuff and get straight to working on web-like code with Vue (which I do know well).
Which platform(s) does your issue occur on?
iOS (but haven't tested on Android)
Are there any entries logged in the Device Logs tab?
See above: ERROR: Error: Could not load CSS from ./foo.css: TypeError: Expected module identifier to be a string.
Please provide the following information shown in the devices tab in the playground:
Model
OS version
Preview app version
Runtime version
iOS device
iOS 14.4.0
1.31.0
6.5.3
Please tell us how to recreate the issue with as much detail as possible.
Create a new Playground app from the NS + Vue.js template, add a .scss file, wonder how to get it to add styles globally.
BTW, I don't want it to seem like I'm being snarky or anything - I get that this is open source, etc. And Playground is amazing for someone like me who just wants to start prototyping. I've just been hitting my head against the wall trying to figure this out and suspect it's mostly due to my lack of understanding or knowledge around webpack, etc.
Please, provide the details below:
Did you search for the problem in other open issues in this repo?
Yes. I found a couple issues related to SASS files, but they all seemed to make assumptions about setup and environment.
Tell us about the problem
For the life of me I can't figure out how to use
.scssfiles in Playground. It seems like it should be possible -.scssappears as an option when creating new files, there's references to SASS in the docs, and if you download the playground code thepackage.jsoncontains SASS-related packages.But I literally cannot figure out the right magic combination of files, imports, where the imports go, etc. to light it up in my own Playground application. I'm using the Nativescript-Vue template if that makes a difference.
Did you try it outside of {N} Playground?
Which browser are you using?
Are there any errors/warnings logged in your browser console?
If I add
foo.scssto theappfolder and add variations of@import "./foo.scss";(without an extension, with a.cssextension, with various./or~/, etc.) to theapp.cssfolder I always seeERROR: Error: Could not load CSS from ./foo.css: TypeError: Expected module identifier to be a string.I'm sure I'm not adding the import in the right place, or in the right way, or something. I'm not a JS developer and my knowledge of webpack and the npm build ecosystem is limited. I was excited about Playground because it lets me ignore most of the tooling stuff and get straight to working on web-like code with Vue (which I do know well).
Which platform(s) does your issue occur on?
Are there any entries logged in the Device Logs tab?
See above:
ERROR: Error: Could not load CSS from ./foo.css: TypeError: Expected module identifier to be a string.Please provide the following information shown in the devices tab in the playground:
Please tell us how to recreate the issue with as much detail as possible.
Create a new Playground app from the NS + Vue.js template, add a
.scssfile, wonder how to get it to add styles globally.BTW, I don't want it to seem like I'm being snarky or anything - I get that this is open source, etc. And Playground is amazing for someone like me who just wants to start prototyping. I've just been hitting my head against the wall trying to figure this out and suspect it's mostly due to my lack of understanding or knowledge around webpack, etc.