I am working with IntelliJ and included an external tool.
Settings - external tools - add tool
here I added 'compass watch' and run it.
Everything works fine, except that when compass compiled the scss it will show the psoitive result only after the next compilation.
I would like to see when it finishes a task, as I do in the console window.
Any idea what to change to get this working?
Here is a screenshot showing that after compass finished it does not show:
override ../css/app.css
if will show the line once a new change happends.
On an error it shows it right away.
I found the clue to the answer in this post: http://devnet.jetbrains.com/message/5478444 It seems you should be creating a file watcher that executes the compass compile command rather than the watcher command. Note that there is an option to choose "Show Console" (see screen print below) as 'Always', 'Never', or 'Error'.
Here's what I did to setup compass for my project:
1) at the command line in the project root directory:
% run compass install compass
directory sass/
directory stylesheets/
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
create stylesheets/screen.css
create stylesheets/print.css
create stylesheets/ie.css
2) then I went into the project and moved all the sass files to sass/ and all the css files to css/
3) then I created a new File Watcher per the screen shot
For Windows
The settings from the screen shot didn't work exactly for me on Windows. Here's my settings that did work:
Program: C:\Ruby200\bin\compass.bat
Arguments: compile $FileParentDir$ --sass-dir sass --css-dir stylesheets
Working Directory: $FileParentDir$
Output paths: <blank>
For others who also has issues with this. I ended up using this folder structure in a Grails project in Intellij Idea 13.1.3 Ultimate:
- grails-app
...
...
- web-app
- css
- sass
- and-so-on
config.rb
With the config.rb as:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
And a filewatcher with these settings:
Program: C:\RailsInstaller\Ruby1.9.3\bin\compass.bat
Arguments: compile
Working Directory: $FileParentDir$
Output paths: C:/path-to-project-folder
Related
I'm trying to setup a file watcher in PyCharm for my SASS files. I've followed the official guide and it worked jsut fine (https://www.jetbrains.com/help/pycharm/transpiling-sass-less-and-scss-to-css.html#)
Now I'd like to change the destination of the compiled CSS files to a specific folder, relative to the SASS file. Basically, the output directory should be ../css/ when starting from the SASS file, because my structure looks like this:
app1/
static/
css/
myfile.css
sass/
myfile.sass
app2/
static/
css/
myfile2.css
sass/
myfile2.sass
I'm not sure I understand what values I should put in arguments and output paths to refresh. I'm currently using the default settings (https://imgur.com/a/rrIJHeR)
I solved it. For anyone struggling with the same issue, here's how I fixed it:
Arguments = sass\$FileName$:css\$FileNameWithoutExtension$.css
Output = css\$FileNameWithoutExtension$.css
Working Directory = $FileParentDir$
Here's an image of the setup :
I've had to go back to an old version of compass: 0.12.7
Otherwise it fails on missing files. Before installing I removed the existing compass installation.
It correctly compiles my css file when I make a change to the scss file.
But when I ask sencha to make a production build with "sencha app build production" the css file in my project gets replaced with a different one.
The file probably gets overwritten at the following line during the build process:
[INF] executing compass using system installed ruby runtime
overwrite ../css/app.css
So it claims to use my installed version of compass.
What am I doing wrong here?
You have the same problem i have met.
Sencha touch 2.4.0 SASS compile error
You should not write your custom css in app.css.
IMHO, there are two ways to add custom css.
1. app.json
2. #import your custom scss file in app.scss in resource/sass/app.scss and then use sencha ant sass to compile css file.
I recently installed the file watchers plugin, and I must configure it to use compass to compile my sass files.
My current config is:
Program: compass
Arguments: compile
Working dir:
Env vars:
output:
How can I target the closest path to(upward folder tree) config.rb file within scss`s parents folders?
I need it to put in "Working dir:" field
My paths are
scss:
projects/<gitrepo>/<project>/<module-name>/static/<same-module-name>/scss/common/main.scss
css:
projects/<gitrepo>/<project>/<module-name>/static/<same-module-name>/css/common/main.css
config.rb are in:
projects/<gitrepo>/<project>/<module-name>
Module name and folders under scss may vary.
Thanks
I'm using the following solution:
Create a compass project in your Idea project folder by this command in your idea project folder:
compass create --css-dir <your css dir here> --sass-dir <your SASS dir here>
this will create a config.rb in the root of your idea project (this is important). You can learn more about possible options calling compass create --help.
Set up the following setting for SASS/SCSS file watcher
Scope: project files
Program: compass.bat
Arguments: compile $FilePathRelativeToProjectRoot$
Working directory: $ProjectFileDir$
Environment variables: --empty--
Output paths to refresh: --empty--
Please note that ruby bin folder is in my PATH environment variable.
I have installed node package manager (npm) on my windows machine and then i ran the command "npm install less -g" and went on setting up the file watcher in PhpStorm for LESS. This worked very good. I also managed to get it to put the .css files in the css folder instead of in the less folder where I have my .less files.
My next step was to install yuicompressor so I ran the command "npm install yuicompressor -g". And then I set it up in PhpStorm by adding the yuicompressor for CSS, but it only creates empty .min.css files.
In the PhpStorm watcher settings I have set:
Program: "C:\Users\XXX\AppData\Roaming\npm\yuicompressor.cmd"
And ticked the box "Create output file from stdout"
I want to achieve this:
.less (project_root/less) -> .css (project_root/css) -> .min.css (project_root/css)
Is there any one else that has had the same problem, I can't seem to find any solution.
Btw, I also tried to install uglify-js, but with the same result, it only creates empy .min.js files.
Some extra info, my environment variables are as follows:
PATH (User) = C:\Users\XXX\AppData\Roaming\npm
Path (System) = C:\Program Files\nodejs\
I removed the "Create output file from stdout" (from the yui CSS file watcher and left it checked on the LESS file watcher) and it seemed to work. But I had to link to the yuicompressor.cmd and not the .jar file as mentioned in the links from LazyOne. I also had to uncheck the "Immediate file synchronization" on the LESS file watcher but needed it to be checked on the yui CSS file watcher.
Seems like its very tricky to get it to go from "LESS -> CSS -> CSS compressed" with only saving the .less file when editing, but with this setup it finally worked.
The following line of Dart code shows true for existing files when run from the Terminal but false when run from IntelliJ or WebStorm. Can someone explain why and how to set up Idea editors so that it will return the same results as the Terminal run.
bool pathExists(String path) => new File(path).existsSync();
Update
After tinkering I've now found out that if I create the project in WebStorm 5 using 'open directory' it works fine for all(WebStorm, IntelliJ, and the Terminal). The problem is when I try to create the project in IntelliJ 12 as there seems to be no equivalent to open directory it seems to try to create a Java project. WebStorm seems to have better support for creating a Dart application from scratch at the moment. See answers below for instructions.
You really should show the whole program and how you run it, otherwise I can only guess. And my guess would be that you are passing a relative path to the function and you run the program from a different directory than IntelliJ.
Let's say I have this Dart program:
import 'dart:io';
bool pathExists(String path) => new File(path).existsSync();
main() {
print(pathExists('books.txt'));
}
This program will print true when the books.txt file exists in the current directory. I happen to have such file in my home directory, so when I do
ladicek#argondie:~$ dart check_file.dart
it will obviously print true. But if I run the same program from another directory, it will surely print false. And that's probably what happens in your case.
You should check the Run/Debug Configuration in IntelliJ, it lets you configure the directory where the program is started.
Following #CrazyCoder's comment: Selecting
Create New Project
then
Static Web/Web Module
and choose your folder at
Project Location
then expand
More Settings
and finally make sure that
Module File Location
is set to where your main() dart file is located. By default it is set to the content root.
Has the same effect as Open Directory. I've tried it and it works fine.