phpStorm doesn't transpile some scss files to css - sass

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

Related

How can I modify the SCSS in the existing project? There are no SCSS file in original

I have to modify the project that someone made. The source seen through the Chrome browser does not exist in real. How could I update the project?
output.js is on the root directory and there is no code... nothing.

.scss not updating style in MVC project

I've searched this question but cant fnd the right question I'm asking about.
I have an MVC project and there's some auto-generated css files that I dont use. I have a scss folder with a file a .scss file called _main-style.scss.
I have a another file that references these sheets, and I use
#import 'sections/main-style';
I'm following the same naming convention as the others.
I even right clicked and did compile. When I run on the browser, it still doesnt update. I inspect the element and the classes dont exist. It's like its not getting them at all.
Can someone help?
Thanks in advance.
From your description, seems like you know about scss and how to compile it to css.
I have an MVC project and there's some auto-generated css files that I dont use.
BUT, What do you mean by this?
Normally if you compile scss to css, and if that css is already linked with your document, It should update automatically
Turns out it needed a hard refresh

Where to put javascript files in the Phoenix framework

So I have a file foo.js which contains the following:
$( document ).ready(function() {
alert("hello world");
});
and if I put it to the web/static/js folder then it doesn't get executed, but if I put it to the web/static/vendor folder then it does, so I wonder why it doesn't work from the js folder? And where should I put my js files? The vendor folder doesn't seem to be the right place ...
As phoenixframework is using bruch.io as default.
In it default configuration. There are two javascript folders
web/static/js
web/static/vendor
When you add .js files under /web/static/vendor these files will be put in non wrapped codebase. These files will undergo concatinations and other processes and brunch.io with other js files (which also include files under web/static/js) and then will be put it in priv/static/js/app.js
When you add .js files under web/static/js these files content will be put in wrapped codebase and then these file will undergo concatination with other brunch.io processes like previously mentioned. To reference to these file you need to use require() To require it first then you can use it.
I hope you understand the reasons here. I researched from https://github.com/brunch/brunch-guide/blob/master/content/en/chapter04-starting-from-scratch.md.
And these configuration can be overriden in the file brunch-config.js or brunch-config.coffee in the phoenixframework geterated folder content.
It turns out that when you add new files to the js folder, you have to require it either in your html file or in app.js, that's one of the brunch's features

Save SASS to same as origin files

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.

Rails app with Compass css files

I have a very basic rails application in which I've added compass and zurb foundation to. I've noticed an issue that now when I save changes to any stylesheet, which I'm using scss for, I also have an additional css file with the same name but .css instead of .scss added to the stylesheets directory. This causes a problem because my layout templates then try to use the application.css file instead of the application.scss file.
Has anyone had this happen and how can I get it to stop adding .css files to my stylesheets directory?
In my foundation_and_overrides.scss file the content is the standard zurb foundation content.
However, in the foundation_and_overrides.css file the contents are:
https://gist.github.com/iambca/5084463
Found the issue here: Auto compile SCSS files in Sublime Text 2
I still don't have a solution but this is the issue. Sublime Text 3 is coming so perhaps this will be resolved in the new release.

Resources