I'm building in WebStorm.
I have a main.scss witch references several partial files (names prefixed with _) via #use. I have a file watcher set up and everything works fine when I'm working in the main.scss - I make changes, they get compiled and are reflected in my build.
When I make change in a partial though they don't seem to trigger the file watcher. In order for the changes to show in the build I have to jump back to main.scss and make some small change that triggers the watcher and everything gets compiled. This is a bit of a pain to keep having to do but I've tried messing around with the watcher settings and have had no luck.
Can anyone suggest a way to trigger the file watcher when partial SCSS files are updated?
Thanks
Not a full answer as WebStorm just doesn't seem to want to play ball but in the end I set up webpack and am using the sass-loader which seems to work as desired and actually makes more sense as I'll usually be running webpack anyway.
Related
I just started using Prepros to compile my SCSS files and I can't seem to figure out how to enable live editing of those files in Chrome Developer Tools.
I'm not really sure how this is supported nowadays, but I've found some examples showing this in action (such as this video) and I know it used to be an experimental feature in earlier versions of Chrome.
In Prepros, I have Source Map enabled and the map is showing up in my filesystem properly.
Chrome is also showing all the SCSS files correctly, but I can't save any changes to the file system (basically, whenever I change something, it only changes in the compiled main.css file).
As you can see here, there are no green dots next to the SCSS files:
...and when I try to edit and save them in the Sources panel, this shows up:
Here's my Prepros project structure (everything gets compiled into the main.css file):
Is there any way to set this up so that I could edit anything in DevTools and save it to the file system from there? I want to avoid copying code over to my text editor as much as possible.
I'm trying to suppress a specific error that is related to a SASS file in Visual Studio. I'll mention that everything works great, the CSS file is generated exactly as the SASS files should generate it, and even with this error on VS, so I think maybe it's a bug on VS.
Basically what I'm doing is that I have 2 SASS files that I declare some variables in them as settings for another SASS file that contains some mixins that work according to the settings file that provided in the context.
For exmaple, these are the 2 files for the settings:
_settings-ltr.scss
$bi-app-left: left;
$bi-app-right: right;
_settings-rtl.scss
$bi-app-left: right;
$bi-app-right: left;
And this is the file that uses those settings:
_mixins.scss
#mixin padding-left($distance) {
padding-#{$bi-app-left}: $distance;
}
#mixin padding-right($distance) {
padding-#{$bi-app-right}: $distance;
}
Now, basically the error says that the variable "$bi-app-left" is undefined (and "$bi-app-right" as well), and I'm really not defining these variables in the "_mixins.scss" file, I pass them to the context in some other SASS file, like this:
site.scss
#import '_settings-ltr.scss';
#import '_mixins.scss';
And it works great, except that error from VS:
My Question
How can I disable this error specifically, without disabling other SASS file errors?
This is because of how the VS SCSS editor resolves variables. It does so from the perspective of the file being edited; because the SCSS editor instance for _mixins.scss does not know how the imports are resolved in site.scss, it doesn't have a way to resolve this reference. If _mixins.scss had an #import chain up to the _settings-ltr.scss (or -rtl), then it would be able to resolve the variable and the error wouldn't be shown.
Similar feedback has been raised here as well. It would be worth opening a new feedback item to better describe the scenario (and also what you're using to compile SCSS, e.g. if you're using WebPack) so the team can prioritize this as a design change. It won't get addressed right away, but we do take the number of feedback items into account for prioritizing the backlog. (And I'd love to have more ammunition to make this feature a priority...)
Currently, there isn't a way in VS to disable a specific SCSS error. This could be another feature request, but it would be a low priority to implement.
I have activated intellisense for files declared elsewhere by referencing the main file (i'll name it mainfile at my example) that imports all the other using /// <reference path="./../mainfile" />.
The code should change depending on the nesting of the mainfile (replace with the name of your own starting file that imports everything else).
Also the difference between the scss file you are adding it. For instance for two folders deep ./.. for three ../.. and so on.
Another example. I usually name my starting file main and all scss files are two - three folder deep.
../../main
./../main
Sadly i did not find a dynamic way to reference the path based on unknown members of files. Also that line has to be added to every single file.
The solution above offers intellisense which sorts the error and you can see the values on hover, go to definition etc as well.
I'm moving my workflow to use sourcemaps with Sass, and it was going well, but I'm having trouble with it overwriting my main.scss every time I make a change in Chrome Devtools.
My file structure is like this:
scss - main.scss
|- inc
|-_mixins.scss
|-_typo.scss
|- etc...
and main.scss contains multiple #import "inc/mixins"; lines, obviously each with different filenames.
I created a sourcemap, using sass --sourcemap scss/main.scss css/main.css and then started watching the files using sass --sourcemap --watch scss:css, (all found in this tut).
I've also mapped working files in Chrome Devtools.
It works initially, in that if I examine the elements in DevTools, I see the code in SCSS. If I edit a value, it overwrites my scss/main.scss with the contents of css/main.css, which is massively weird.
Anyone shed any light on this?
So, I figured it out.
I followed the tut to get this working, but had mapped the local files incorrectly.
If you are manually setting up SASS sourcemapping, you must be careful to map included files to the correct locations. Somehow I had one mapped to main.scss, and so it was overwriting it on changes.
I am using sass with prepros compiler and sublime editor. I need to have each scss file complied with the same file name.
For example:
I currently have-
header.scss
content-top.scss
footer.scss
and they are all compiles into style.css to create one full style sheet.
I wish to have a style folder with
header.css
content-top.css
footer.css
which will be done automatically when saving and compiling like I normally do.
How can I accomplish this?
Thank you
Check this link out.
It states that you can adjust your project structure (in your case CSS folders) in project settings.
If I remember correctly you may have to buy it so that you can compile more than 4 or 5 Sass files, but I may be wrong.
Also check that you aren't "only" importing sass partials because of this:
Any Sass and Scss file (i.e. including partials) imported by another
file are not shown in the files list but they are still watched by Prepros.
The parent file is re-compiled whenever any of the imported files are changed.
I don't know why my filewatcher doesn't transpile certain scss files. I wanted to rename files that already existed to use them as partials. That worked fine for most of them but i couldn't rename all of them. When I tried to use "refactor->rename" there was a warning that the files would be used by another script but that was definitly not the case. I was not able to rename them in phpStorm so i renamed them in the directory manually. That worked but now no css files are created anymore. I tried to synchronize but that didn't help. My settings seems to be correct (see picture). Anyone had the same problem before and knows the solution?
When "Track only root files" option is on, the content of partials is merged into a single .css files when transpiling, so that a single css is generated instead of creating a separate css for each partial