I have configured a PyCharm file watcher that transpiles SCSS (in a SCSS folder) into CSS (in a CSS folder). The CSS files appear to reflect the changes in the SCSS files only when I close and re-open the CSS folder dropdown. How can I make this process automated?
This is what I have in the arguments field:
--no-cache --update $FileName$:$ProjectFileDir$/main/static/css/$FileNameWithoutExtension$.css
The Output paths to refresh option is the directory that gets refreshed. It needs to match the output directory you specified in the arguments field $ProjectFileDir$/main/static/css/
For future reference: I've published a post here on how to configure the file watcher with SCSS.
http://codeveloped.blogspot.nl/2015/01/pycharm-filewatcher-and-sass-scss.html
console: gem install sass
console: gem install scss
console: gem install compass
console: which scss <--get the path
Pycharm: "Programm" set: path from 4. it could be /usr/local/bin/scss or usr/bin/scss
Pycharm: "Arguments" set: --no-cache --update --force --sourcemap=none --compass $FileName$:$ProjectFileDir$/app-name/static/css/$FileNameWithoutExtension$.css ( be carefull using $Sourcepath variable as mentioned before, it can return depending on the project multiple path path1:path2:path3 and scss do nothing)
Pycharm: "Output paths to refresh" set: $ProjectFileDir$/app-name/static/css/
Related
Attempting on a Mac with the latest version of Yosemite
I'm using the latest version of sass to refactor my site. I'm setting up watch command via the command line. my directory setup has a scss folder with the main css stylesheet cloned as .scss. and no css folder.
When I attempt the sass --watch scss:css command while in the main project directory folder, I've been told that, if there isn't one present, a css folder should be generated and a cloned .css file should be created along with a map file. Command line tells me >>> Sass is watching for changes. Press Ctrl-C to stop. however, changes are not being recorded.
I've tried updating my gems and uninstalling/ reinstalling sass, but nothing seems to be working.
Just tried this - the css folder doesn't get autogenerated. You need to generate it yourself. From there on, you should be good to go.
So if you are in the main project folder with subfolders called scss and css and you have, for example, a main.scss file in the scss directory, you can run the command exactly as you specified and everything should work as specified.
I just installed Sass using Ruby Gems, although my project is in NodeJS in Webstorm. To enable the SASS file watcher in Webstorm. When I run "sass styles.scss" from the commandline, I get a .sass-cache folder but not the actual compiled CSS file. Webstorm does not show any errors in my SASS file. I need the file to compile to a .css file.
I am also trying to setup a filewatcher in Webstorm that is not compiling the scss file. My SCSS executable path in the filewatcher in Webstorm is this. C:\Ruby200-x64\bin\sass.bat.
Here are the filewatcher settings.
The error Webstorm shows in the console, when the .scss file is saved is (which is when the file watcher should be triggered), is this:
C:/Ruby200-x64/bin/sass.bat --no-cache --update styles.scss:styles.css
'"ruby.exe"' is not recognized as an internal or external command,
operable program or batch file.
The full argument to the file watcher that cant be entirely seen in the image above is this:
--no-cache --update $FileName$:$FileNameWithoutExtension$.css
Here it is:
Didn't numerate but from top to bottom,
Select you watcher, you can make presets for various situations (Maybe try to make a new one)
Path to my 32bit sass.bat (not 100% sure but I think that even scss.bat worked)
Output, you can see in screenshot below how it should work/look.
I'm pretty new to SASS/SCSS and got a git project with CSS Files in the main directory which shall import partials from a subdirectory. I was wondering if it's possible to install sass on the server, create a compass project so that css files will be created automatically after a live edit of the scss files on the server? Or does it have to be local with a filewatcher? I already tried to set up a compass project on the server but no css files were created automatically. Was it because of wrong settings or is it just not possible this way?
If it's possible is there a good step by step tutorial? I already found this
Maybe the problem is the path. In my config.rb I changed the path without knowing what to write in the string if sass and css directory are the same as project path. Didn't work with "/" or an empty string.
Both Sass and Compass provide watch commands. You can use either:
sass --watch input.scss:output.css (options)
or, assuming you've got your Compass config file correctly setting your css_dir vairable:
compass watch
Either of those should recompile the css file upon changes. If you want this done live on the server, you'll need to execute the watch command on the server.
To add a point to #aerook's answer,
In your projects you may have multiple scss and css files. In which case you may use the following to watch the entire scss directory to make changes in the css directory
sass --watch scss:css
PS : scss and css are folder names in the same directory path.
I tried:
sass-convert --from scss --to css --recursive app/assets/stylesheets temp
But this only converts css to SASS, and I want the other way around.
Then I looked at the sass command, but it doesn't look like I can pass it a directory.
To do a one-time Sass compile instead of a watch, you can do this from the command line:
sass --update scss:css
To have Sass import one file (usually a partial, with a _ starting the filename), you can do this inside a Sass file:
#import "_base.scss";
This way, Sass knows where you want the include to occur.
By default, Sass can't import an entire directory. The Sass Globbing gem, however, can. You can install it from the command line:
gem install sass-globbing
And then watch with it:
sass -r sass-globbing --watch sass_dir:css_dir
Note that globbing will import files alphabetically, so be sure your CSS will cascade appropriately if this occurs.
Use the sass command followed by the input file name and path, a colon (:) and the desired output file name and path. If the output file does not already exist Sass will generate it. For example,
sass sass/main.scss:css/main.css
However, this is a one-off command that would require being run every time you want to generate a new CSS file. A simpler and handier method is to use Sass's built-in --watch flag. This watches for changes to your Sass file and automatically runs the compile command each time you save changes.
sass --watch sass/main.scss:css/main.css
If you have multiple Sass files within a directory you can watch for changes to any file within that directory:
sass --watch sass:css
Sass also has four CSS output styles available: nested, expanded, compact and compressed. These can be used thus:
sass --watch sass:css --style compressed
Refer to the Sass documentation for more.
to that, simply go your project directory and do this :
sass --update sass-dir:assets/css
with sass-dir the directory containing your actual sass files and assets/css the desired output directory.
Hope this could help.
You can use compass to convert Sass files into CSS.
To initialize the config.rb, try:
compass init --syntax=sass --css-dir=css --javascripts-dir=js
Once you've the configuration file, try:
compass compile
or by specifying the file explicitly: compass compile sass/foo.scss.
To install it, try:
sudo gem update
sudo gem install sass compass
https://sass-lang.com/guide
you can use
sass --watch [input folder path]:[output folder path]
i tried running it in a new terminal and after that sass watches the folder and compiles upon any changes.
you can use this code
sass --watch file.sass:file.css
or
sass --watch folderSass:foldercss
if you want to create css.main you can use this code
sass --watch sass:css --style compressed
With SASS you are required to create a config.rb which manages the location of the app. I've recently changed the name of this file to "sass_config.rb" and can't figure out how to change the default of "compass watch" so that it finds my renamed file.
To clarify, when I run the following command compass correctly finds the file and continues with its normal behavior:
compass -c watch sass_config.rb
But when I run:
compass watch
It says:
Nothing to compile. If you're trying to start a new project,
you have left off the directory argument.
How can I fix this behavior so it sees the file has been renamed by just running "compass watch"?
The configuration filename cannot be arbitrarily modified. It is hard coded within Compass to be in one of 5 locations (soon to be 4).
https://github.com/chriseppstein/compass/blob/192107cb4f17bef52fdd8c0d961fe77f3edb44c4/lib/compass/configuration/helpers.rb#L137
# TODO: Deprecate the src/config.rb location.
KNOWN_CONFIG_LOCATIONS = ['config/compass.rb', ".compass/config.rb", "config/compass.config", "config.rb", "src/config.rb"]
Just create a compass project by
compass create
after that you copy the OLD config.rb content to the created one from copass.
Now try
compass watch