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.
Related
while vs code extension development, there is /out folder which keep generated js files for respective typescript file but committing these files in remote repo seems not useful so adding the entry in .gitignore but now when I run the extension it say module not found
Activating extension 'xkeshav.<extension-name>' failed: Cannot find module 'd:\Developer\extension-folder\out\extension.js'
Require stack:
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
- .
so my question is
when not keeping /out entry in .gitignore, it works file so whether we need to commit these files in remote or not ?
Make sure you have a .vscodeignore file in your repo. VS Code only uses .gitignore if there's no .vscodeignore. The .vscodeignore file is then used to exclude files/folders from the extension bundle instead of .gitignore. A typical .vscodeignore looks like this:
.vscode/**
.vscode-test/**
out/test/**
test/**
src/**
images/**
**/*.map
.gitignore
.eslintignore
.eslintrc.json
tsconfig.json
typings/**
As you see out/ itself is not excluded, just the tests which end up there.
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 :
Is there a way to configure vuepress to look for the folder .vuepress somewhere else than default /docs?
UPDATE: VuePress 1.5.0 now only reads from docs/.vuepress, so the workaround below no longer works. However, another possible (less elegant) workaround is to symlink the docs/.vuepress to the desired location (tested on macOS Catalina).
For example, you could symlink it to <projectRoot>/.vuepress on macOS with:
mkdir .vuepress docs
cd docs
ln -s ../.vuepress
As of VuePress 0.12.0, there's no specific configuration to set the location of .vuepress/. VuePress always looks for .vuepress/ in the target directory (docs/) and the immediate parent directory. If not found, VuePress creates .vuepress/ in the parent directory of docs/.
If your objective is to prevent the creation of docs/.vuepress/ and you didn't mind .vuepress/ in the parent directory of docs/:
Create .vuepress/config.js in the parent directory of docs/.
Edit that file to contain the following config:
module.exports = {
dest: 'foo' // desired path to VuePress output
}
Run vuepress build in the parent directory of docs/.
The result of the above config is to create a directory foo/ with the VuePress static site output:
$ vuepress build
WAIT Extracting site metadata...
[2:20:45 AM] Compiling Client
[2:20:45 AM] Compiling Server
(node:47073) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[2:20:48 AM] Compiled Server in 3s
[2:20:50 AM] Compiled Client in 5s
WAIT Rendering static HTML...
DONE Success! Generated static files in foo.
Don't think there is. In 2018, the author has stated:
I don't see practical value in this except for personal preference, so probably not.
Im developing a project using Sencha Touch (not sure if this is an important fact) and I want to include in the CSS file generated with compass all the SCSS files in a folder.
So given this project structure:
index.html
resources
css
app.css (generated file)
sass
app.scss
config.rb (sass config file)
ux
ExamplePlugin1
style.scss
ExamplePlugin2
style.scss
That I want is to include all the scss files into the 'ux' folder into the final app.css file.
To generate app.css, compass reads the config.rb file in the sass folder. I modified that file to achieve this, but that didnt work. This is the content of the config.rb file:
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'resources', 'themes')
# MODIFIED LINE TO INCLUDE THE UX FOLDER
load File.join(dir, '..', '..', 'ux')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
Another possible solution is to include all the individual files into the app.scss, but that didnt work also. I added this line to app.scss:
#import 'ux/ExamplePlugin1';
But this gives me and error when compass try to compile it :(
I hope that this explanation is enough to solve the problem. If someone needs more information, just ask! :P
Thanks!
There's already a solution for your issue, no need to reinvent the wheel:
Compass and sass: possible to auto-import all partials?
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