For example, there is package for less LessToCss. As for Sass(or SCSS) I don't know what i should do. Ruby and sublime package Sass are installed.
You have to alter the PATH variable at the end of PATH string in the Environment Variables: Desktop - Properties - Environment Variables. It for win vista/7 users. Detail for 2000/XP here Sass compiler not working in sublime text 3
One way is to download a SASS build compiler from here: SASS Compiler
This is automatic Sublime package that simply builds your file at the place.
However since they released the new version, there seem to be multiple settings on this package - you could try to mess with that a bit and see what it can do nowdays.
Second way is to write your own Build command in Sublime. You do this by going to "Tools>Build System>New Build System..."
{
"cmd": ["sass", "--update", "$file:${project_path}/Project/Web/css/${file_base_name}.css", "--stop-on-error", "--style", "compressed", "--no-cache", "--sourcemap=none"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
Explanation: I use a folder structure as the following: Project/Web/CSS - If you have the Sublime Project FILE at the same level as Project FOLDER, then this will automatically build your Sass file (placed ANYWHERE in the project file) in your Web/CSS folder. Of course you can change this as you see fitting.
here is 100% solution, as i also using. Actually i am using in mac so, i am not sure about windows because i wouldn't try yet in windows but i think it will works in window's too.
so here is the build;
copy this from starting brackets and paste it into build and then save with any name like (Build to CSS),"
{
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
"osx":
{
"path": "/user/local/bin:$PATH"
},
"windows":
{
"shell": true
}
}
If it's working then please comment.
Thanks
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",
I downloaded MinGW following the first link here https://isocpp.org/get-started and now I need to configure it in SubimeText 3. I know I should go to Tools > Build System > New Build System... But what should I specify there?
I use Win7x64. And MinGW is in C:\MinGW
The complete reference for build systems is here. The first thing you need to do is make sure that the C:\MinGW\bin directory is in your PATH, then restart Sublime so the change gets picked up.
Once you've done that, create a new build system with the following contents:
{
"cmd": ["gcc", "${file}", "-o", "${file_base_name}.exe"],
"file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$",
"working_dir": "${file_path}",
"selector": "source.c, source.c++",
"shell": true,
"variants":
[
{
"name": "Run",
"cmd": ["start", "cmd", "/k", "${file_path}/${file_base_name}.exe"],
"shell": true
}
]
}
and save it as Packages/User/C.sublime-build where the Packages folder is the one opened by selecting Preferences -> Browse Packages....
You can now choose this build system by selecting Tools -> Build System -> C. Once you are ready to compile, save your source file, then hit CtrlB to build. To run the program, hit CtrlShiftB and a cmd window will open up to run the resulting .exe file, then stay open until you close it (so you can see any output produced by the program).
You can try to use the C++ build system that comes with Sublime, but some users have run into issues with it in the past, especially on Windows, so this custom one may suit your needs better.
Good luck!
Present is the following build system for SASS files.
{
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style", "compressed"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
},
"working_dir": "$file_path",
}
This script works perfectly for .scss files and, when a .scss file is open, it is automatically selected and Cmd+B builds the source. But this is not the case for .sass files. There, Build is greyed out until the build system is selected manually. What can be done do fix this behaviour?
Make sure you check the scope of the file is the same as your selector. ctrl+shift+alt+p in Windows and Linux and cmd+alt+p in OS X.
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.
Cucumber.js is supplying a command-line "binary" which is a simple .js file containing a shebang instruction:
#!/usr/bin/env node
var Cucumber = require('../lib/cucumber');
// ...
The binary is specified in package.json with the "bin" configuration key:
{ "name" : "cucumber"
, "description" : "The official JavaScript implementation of Cucumber."
// ...
, "bin": { "cucumber.js": "./bin/cucumber.js" }
// ...
This all works well on POSIX systems. Someone reported an issue when running Cucumber.js on Windows.
Basically, the .js file seems to be executed through the JScript interpreter of Windows (not Node.js) and it throws a syntax error because of the shebang instruction.
My question is: what is the recommended way of setting up a "binary" script that works on both UNIX and Windows systems?
Thanks.
Windows ignores the shebang line #!/usr/bin/env node and will execute it according to the .js file association. Be explicit about calling your script with node
node hello.js
ps. Pedantry: shebangs aren't in the POSIX standard but they are supported by most *nix system.
If you package your project for Npm, use the 'bin' field in package.json. Then on Windows, Npm will install a .cmd wrapper along side your script so users can execute it from the command-line
hello
For npm to create the shim right, the script must have the shebang line #!/usr/bin/env node
your "bin" should be "cucumber" npm will create a "cucumber" or "cucumber.cmd" file pointing to "node %SCRIPTNAME%". the former being for posix environments, the latter being for windows use... If you want the "js" to be part of the executable name... you should use a hyphon instead... "cucumber-js" ... Having a .js file will come before the .js.cmd in your case causing the WScript interpreter to run it as a JScript file, not a node script.
I would suggest looking at coffee-script's package.json for a good example.
{
"name": "coffee-script",
"description": "Unfancy JavaScript",
"keywords": ["javascript", "language", "coffeescript", "compiler"],
"author": "Jeremy Ashkenas",
"version": "1.4.0",
"licenses": [{
"type": "MIT",
"url": "https://raw.github.com/jashkenas/coffee-script/master/LICENSE"
}],
"engines": {
"node": ">=0.4.0"
},
"directories" : {
"lib" : "./lib/coffee-script"
},
"main" : "./lib/coffee-script/coffee-script",
"bin": {
"coffee": "./bin/coffee",
"cake": "./bin/cake"
},
"scripts": {
"test": "node ./bin/cake test"
},
"homepage": "http://coffeescript.org",
"bugs": "https://github.com/jashkenas/coffee-script/issues",
"repository": {
"type": "git",
"url": "git://github.com/jashkenas/coffee-script.git"
},
"devDependencies": {
"uglify-js": ">=1.0.0",
"jison": ">=0.2.0"
}
}
I managed to figure out a solution to a similar issue.
My original plan was to have only one large .js file, for both the API and CLI (the reason is because I didn't know how to share variables between two files at the time). And when everything was built, I tried to add the #!/usr/bin/env node shebang to my file. However that didn't stop Windows Script Host from giving an error.
What I ended up doing was coming up with an idea of a "variable bridge" that allowed variables to be read and set using getVar and setVar. This made me have to extract the CLI code from the API code and add some imports to the variable bridge.
In the CLI file, I added the shebang, and modified the package.json of my project to have:
{
...
"main": "./bin/api.js",
"bin": {
"validator": "./bin/cli.js"
}
...
}
Here are a few small notes that I think might help if Windows Script Host is still giving an error (I applied all of them so I'm not sure which one helped):
Using only LF line endings seemed to help.
It seems that ./bin is the preferred directory for compiled files. I did try ./dist but it didn't work for me.
An empty line after the shebang may be needed:
// cli.js
#!/usr/bin/env node
// code...
Using the same name for main and bin in package.json seemed to be an issue for me.