I'm trying to set up a Compass project. Everything seem to work when I compile manually. However, when I'm using a File Watcher it saves it in the same directory as the SCSS file.
I just want the File Watcher to use my configuration file. Preferably on every project in the future.
Right: Structure when compiled manually
Wrong: Structure when compiled with the File Watcher
config.rb
css_dir = "css"
sass_dir = "css/sass"
output_style = :compressed
File Watcher
How can I make the File Watcher to respect the configuration?
Solved!
Deleted the SCSS File Watcher
Manually added a Compass File Watcher
Set arguments to: compile $ProjectFileDir$
Related
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'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
I have the following directory structure.
Gulpfile.js
--dist
--src
----config.rb
I'm using Gulp from the root project directory to compile my scss, which is what I think is causing issues.
When I compile (creating a sprite sheet, specifically) the URL ends up being /src/other/stuff/here when I need it to just be /other/stuff/here
You can see my config.rb here.
http_path = "/"
css_dir = "src/assets/css"
sass_dir = "src/assets/sass"
images_dir = "src/assets/images"
javascripts_dir = "src/assets/js"
relative_assets = true
output_style = :compressed
line_comments = false
Then in my scss file, I use the following to generate the sheet.
#import "icons/*.png";
#include all-icons-sprites;
It creates it fine, but I just need to remove the src folder. I could do this with a search/replace pipe in Gulp, but I'd rather just have my config file setup properly if that's possible.
What should I look into to make this work how I need it to?
I have a mixins file, which I constantly develop. I use it in every project, but sometimes I need to go back and I not always remember to copy the new file, so it causes confusion (plus, it's really counterproductive, having to copy a single file to each project).
What I thought today, that it would be great if I could import a scss file either from remote hos (a dropbox url) or an absolute path. I tried using this:
#import 'F:/XAMPP/htdocs/RATIUG/ratiug/reset';
and
#import 'http://myDropboxLink';
but neither worked. Can I solve this somehow?
When Sass encounters #import with a protocol, it assumed that is a CSS directive. So, you have to precise a shared folder.
Solution with Sass
If you uses Sass in standalone mode, you can add the --load-path argument to precise the shared folder:
$ sass --load-path F:/XAMPP/htdocs/RATIUG styles.scss
Now, you can call your reset mixin:
#import "ratiug/reset";
Solution with Compass
Simply add the shared path in your config.rb with add_import_path:
sass_dir = "sass"
css_dir = "css"
add_import_path File.expand_path("F:/XAMPP/htdocs/RATIUG")
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.