I am trying to set-up automatic build of .scss files in Sublime Text 2. I keep getting the error [Error 2] The system cannot find the file specified. I've tried several configurations, but I'm just not getting it.
On my current project, the structure is like:
- 2014
- sites
- all
- themes
- 2014sub_theme
- sass
- css
I have set-up a project and within my .sublime-project file I have (complete file contents):
{
"folders":
[
{
"path": "sites/2014"
}
],
"build_systems":
[
{
"name": "SASS-Custom",
"cmd": [
"sass",
"--watch",
"sass:css"
],
"working_dir": "$project_path/sites/2014/sites/all/themes/2014sub_theme"
}
]
}
When I save, I get the following error:
[Error 2] The system cannot find the file specified
[cmd: [u'sass', u'--watch', u'sass:css']]
[dir: C:\wamp\www\sites\2014\sites\all\themes\2014sub_theme]
[path: __path stuff removed__]
[Finished]
Without a doubt, the sass folder is at C:\wamp\www\sites\2014\sites\all\themes\2014sub_theme\sass and css is at C:\wamp\www\sites\2014\sites\all\themes\2014sub_theme\css.
From cmd.exe, I do this:
cd C:\wamp\www\sites\2014\sites\all\themes\2014sub_theme
sass --watch sass:css
It works just fine, any changes to sass/global.scss are immediately compiled to css/global.css
I am using SublimeOnSaveBuild.
I ran into this same issue and spent quite a while messing with it. I know this is very late, probably too late to help you, but I'm going to answer anyway for anyone else who might stumble upon this question.
For some reason, just using "sass" fails from the ST3 build system. Change it to "sass.bat" (also a file in the same directory) and it worked for me.
Related
I am new to web development in general, and I am trying to setup sass following the documentation here:
https://code.visualstudio.com/docs/languages/css
However I am receiving this error:
"An output directory must be specified when compiling a directory". On
the internet people are suggesting solutions, but they are related to
configuration of other editors.
My project looks like this, so you can have an idea how my project is set up:
SASS project config screenshot
I tried adding all design files in the same folder as the tasks.json file, but it didn't work and I got the same error.
I have one more question: do I need to create the .css file, or does the task create it if it's not found?
I appreciate any help possible.
I just figured this out, while looking for the same solution.
Your "args" have to be configured like this:
"args": ["./src/app/styles.scss", "./src/app/styles.css"]
or
"args": ["./(static or assets folder)/(sass folder)/styles.scss", "./(static or assets folder)/(css folder)/styles.css"]
The "./" points to the root of the project, then simply include the appropriate folder path.
Cheers!
The default setup for the Sass Task Runner on https://code.visualstudio.com/docs/languages/css now looks like this:
// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass Compile",
"type": "shell",
"command": "node-sass styles.scss styles.css",
"group": "build"
}
]
}
If you get the error
"An output directory must be specified when compiling a directory"
then change the configuration like:
"command": "node-sass ./<your path>/styles.scss ./<your path>/styles.css",
All is in the title :)
How can I build css from sass file in vscode ?
In task file I just found lines for LESS not for SASS...
Thanks a lot !
I got it to work.
My root path has a /css folder underneath with my styles.scss file & the associated map file. I also had to fix my path for ruby. Once those two were working, my build showed an error where ruby couldn't find the scss file. So I fixed my task file - here is the working file. Notice the ${fileDirname} - that fixed the build errors for pathing.
{
"version": "0.1.0",
"command": "sass",
"args": ["${fileDirname}/styles.scss", "${fileDirname}/styles.css", "--trace"],
"isShellCommand": true
}
}
But this was just a test -- it doesn't watch and build more than 1 file as you would normally want to in a larger system. The docs for gulp/automation are here: https://code.visualstudio.com/Docs/languages/CSS
We don't have predefined problem matchers for SASS yet. You might want to open a feature request here https://code.visualstudio.com/Issues/List
But you can always create a problem matcher for SASS yourself. Have a look at the doc here: https://code.visualstudio.com/Docs/tasks#_defining-a-problem-matcher
Using Koala and started using it by adding the 'css' directory. My directory structure looks like
-- www
-- -- css
-- -- -- template.css
-- -- -- template.scss
I've checked 'compass mode' in Koala but it is giving error 'You must compile individual stylesheets from the project directory'.
I just had this error and resolved it by editing the Koala project settings.
In Koala, right click on your project's folder, follow the menu for Project Settings > New Settings > For SASS
Koala will ask if you want to create a koala-config.json. Answer, yes. Unless this file already exists. In that case go directly to editing it.
Edit the section of koala-config.json called Mappings. Keep in mind that koala-config.json is in the my-project-folder root and the "src" and "dest" values should be relative to that file. So, for me, all my CSS files are in my-project-folder/assets/css and I changed the config file as below:
// The mappings of source directory and output directory
"mappings": [
{
"src": "assets/css",
"dest": "assets/css"
}
],
For you, I suspect this should do it:
// The mappings of source directory and output directory
"mappings": [
{
"src": "www/css",
"dest": "www/css"
}
],
The instructions above did not help me.
SOLUTION: I simply changed the NAME of the FOLDER that held my .scss files from scss to sass, deleted the .rb and .json files (if they exist) and reloaded my file to Koala.
I hope it works for you all.
Check if your computer has Ruby installed. Then set projects paths in Koala as #helgatheviking said
I typically use Sublime Text on a Mac at work and it's fine. But I'm trying to set up Sublime Text with my Windows PC at home and keep getting errors when trying to run my build script.
Here's my project file:
{
"folders":
[
{
"path": "my-folder"
}
],
"build_systems":
[
{
"name": "Ant",
"cmd": ["ant"],
"working_dir": "${project_path}"
}
]
}
And here's the error I get:
[Error 2] The system cannot find the file specified
[cmd: [u'ant']]
[dir: D:\Users\****\Projects]
[path: C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\]
[Finished]
Seems that it can't find ANT? But isn't that bundled with Sublime Text?
Type 'ant' in your commandline. If it throws an error, then ant is not in your PATH. You'll need to install it (http://ant.apache.org/manual/install.html) and then add it to your PATH environment variable.
I use Sublime, but I don't know if it packages Ant by default. If it does, just add the location of the binary to your system PATH.
I've created this build system for Sublime Text 2 to run my Grunt project:
{
"cmd": ["grunt"] ,
"selector": ["source.js", "source.less", "source.json"] ,
"working_dir": "${project_path}/MyProject" ,
"path": "/Users/me/.nvm/v0.10.0/bin",
"shell": true
}
Everytime I try to build, I get this error:
Warning: You need to have Ruby and Sass installed and in your PATH for
this task to work. More info:
Despite the fact that I've installed both Ruby and Sass, and both are available in the terminal. Also, I've tried "echo $PATH" and it looks ok...
/Library/Frameworks/Python.framework/Versions/2.7/bin:/Users/me/.venvburrito/bin:/Users/me/.nvm/v0.8.22/bin:/opt/local/bin:/opt/local/sbin:/Library/Frameworks/Python.framework/Versions/2.7/bin:/Library/Frameworks/Python.framework/Versions/2.7/bin:/Users/me/.rvm/gems/ruby-2.0.0-p0/bin:/Users/me/.rvm/gems/ruby-2.0.0-p0#global/bin:/Users/me/.rvm/rubies/ruby-2.0.0-p0/bin:/Users/me/.rvm/bin:/Library/Frameworks/Python.framework/Versions/2.7/bin:/opt/local/bin:/opt/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/usr/local/git/bin
Why can't sublime seem to access my environmental variables?
The "path" property will overwrite the existing path. You'll need to either remove the property or manually add in the path to the Sass binary. You can find it using which sass.
Example:
"path": "/usr/local/bin/:/Users/me/.nvm/v0.10.0/bin"
Got it working. I had to add this to the "path" property:
"/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/me/.rvm/rubies/ruby-2.0.0-p0/bin/ruby:/Users/me/.rvm/gems/ruby-2.0.0-p0/bin/sass:/Users/me/.nvm/v0.10.0/bin"
Obviously you'll have to replace "me" with your own name. Thanks to Sindre Sorhus for pointing me in the right direction.