I'm taking my first steps in PhpStorm and SASS. I went to File > Settings > File Watcher and I added SCSS
This is my current configuration:
Program: C:\Ruby23\bin\scss.bat
Arguments: --no-cache --update $FileName$:$FileParentDir$\$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileParentDir$\$FileNameWithoutExtension$.css
And it's working in the following way. Given the structure:
/mysite
/sass
1.scss
2.scss
3.scss
when I add a SCSS file to /sass it generates .css and .css.map files inside /mysite. However, I want to generate just one CSS file inside /mysite and avoid the map files. How can I do this?
if you have a primary SCSS file that imports other files (partials, their names usually start with underscore), you just need to make sure that 'Track only root files' is enabled in File watcher settings to get the output merged into a single .css
If you don't like .map files being created, pass --sourcemap=none to compiler
Related
As you can see I have a lib\css folder with one scss file where I imported bootstrap.scss and an index.css where my code scss is compiled. The compilations works, the issue is WHY all these other .css and .css.map files are created???
If you have multiple scss files and you don't want every file to be converted in CSS then create a folder named scss. In that folder create the main scss file named style.scss or whatever name you want and move your scss files in this folder. Now rename all scss files except style.scss by adding _ at the start of the file name for example:
header.scss will be _header.scss.
Now import every scss file in style.scss. A file named _header.scss will be imported in style.scss as follows:
#import "header";
Now watch your scss folder as follows:
sass --watch path/to/scss:CSS
This will compile your scss files from scss folder and make only one CSS file.
I'm working on a project that my colleagues are also working on, they're working on it in Atom and they have Atom set up so that it works like this:
There's a folder, css, and in that folder is the main file, custom.scss, which imports all other scss files and is compiled in custom.min.css and custom.min.css.map. There are also subfolders with more scss files. Any time any scss file changes in css or any of its subfolders, custom.scss recompiles, but no other scss file recompiles.
Using WebStorm's SCSS File Watcher, can I do this?
My first attempt was to change the scope in the watcher settings, to just watching custom.scss, and that kinda works, but I have to change custom.scss every time I want it recompiled, instead of it recompiling when I change any of the other scss files as well.
My intuition is that I should have the scope set to watching all scss files in the css directory, recursively, and that I should change the Arguments setting in the file watcher to explicitly say compile custom.scss into custom.min.css but I'm not quite sure how to do that
The key setting here is 'Track only root files' -- when that's not set, it tries to compile all watched scss files as they are saved individually, but when it is set, it only compiles a file if it is NOT marked as an include in another file.
Set the scope to watch changes on all scss files: file:assets/css/*.scss
Click 'Track only root files'
Change the arguments to $FileName$:$FileNameWithoutExtension$.min.css --style compressed so that it minifies
Now, when you save a file included in custom.scss, it recompiles only custom.scss (and other root files) into custom.min.css and custom.min.css.map
I have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
There seem to be a few plugins...and I'm using webstorm file watcher which also precompiles individual files.
I think this may not be the best way to setup a watcher.
I'm running this command now:
sass --no-cache --update --stop-on-error --trace ./app/sass:./app/css
It seems to conflict with the webstorm file watch, which appears to be appending everything to base.css. Can someone tell me what exactly this command is doing vs. a sass filewatcher in webstorm?
What's the best way to work with sass:
precompile my sass to css using a grunt build task
and have file watchers while developing?
My base.sass looks like this:
#charset "UTF-8";
/* DO NOT EDIT FILES IN ./css. See ./sass instead */
#import "page";
#import "modal";
#import "nav";
#import "tables";
#import "forms";
#import "message";
Your command just compiles all files in diretory ./app/sass to CSS and put the resultant files to ./app/css. Default file watcher runs the following command:
sass --no-cache --update $FileName$:$FileNameWithoutExtension$.css
i.e. it takes the current file (the one that has been changed) as input and creates a .css in the same directory. But, as you have 'track only root files' option on (default settings), the watcher creates css for the root file only - the one that reference other files via imports. You can turn this option off to change the current behavior ans get css generated for other files as well.
When using Scout, is there a way to prevent it from compiling every SCSS file? I use one main SCSS file to import all dependency SCSS, thus only need the one CSS file output, as opposed to one CSS for each SCSS.
Files prefixed with an underscore do not get compiled to a CSS file. This is a standard Sass feature. Only the first file listed here will have a corresponding CSS file generated:
i-am-compiled.scss
_i-am-not-compiled.scss
_i-am-also-not-compiled.scss