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
Related
It's great that ParcelJS just handles sass out of the box but I'm running into a problem where it keeps throwing an exception when it encounters a url within in my scss file. I guess Parcel is trying to locate the resource and rewrite the url. I do not want Parcel to do this. Is there anyway to disable this? I just want it to compile the sass and leave any urls in there alone.
This question was posted when Parcel v1 was the latest version. For folks arriving here in the future, you can accomplish this in Parcel v2 with the parcel-resolver-ignore plugin. Here's how:
Install it (e.g. yarn add -D parcel-resolver-ignore)
Create or modify your .parcelrc file to add it to the parcel pipeline:
{
"extends": "#parcel/config-default",
"resolvers": ["parcel-resolver-ignore", "..."]
}
Add a "parcelIgnore" entry to package.json that contains regex patterns that define which resources to ignore, e.g.:
{
// An array of Regex patterns
"parcelIgnore": [
"images\/*.*",
]
}
The things you want to target your regexes to match are the urls referenced in the .scss files, not the .scss files themselves.
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 just can't get it work. I have a .scss file with some basic CSS.
Now, I have installed Ruby and I installed SASS like so - gem install sass.
What do I do to get it work on sublime?
I installed "SASS" so sublime acknowledge the .SCSS extension. I also installed SASS builder, and it actually works but in an strange way.
In addition to the compiled css file, it also adds .map file and a folder name .sass-cache.
Why Is that? How to I get rid of that? I don't need a .map file.
I also get an alert every single time the build is done. ("style.css has been compiled")
And not only that but I also get this comment at the end of my compiled CSS file:
/*# sourceMappingURL=style.css.map */
Please help, I'm lost.
Thanks in advance.
The .map file is for chrome (and maybe other browsers) to MAP your CSS that is rendered in the browser back to your actual SCSS. This is very very useful when debugging.
The scss-cache is just what it says it is a cache file that Sass uses. You can delete it but it will keep coming back every time you compile.
Once you go to production you can set Sass to not add any comments to your final css output file. You do this through a config.rb file if you are using compass.
Search on YouTube for LevelUp Tuts and Sass Compass install. Scott expanse how to get stared very well.
--sourcemap=none will disable the comment as well as the .map file creation. not so hard guys.
also, --no-cache will prevent creating the .sass-cache folder and its content.
Thanks anyway.
Try using SassBuilder for ST2. And you can config not to include comments, cache,etc with True/False.
{
"output_path": "../css",
"options": {
"cache": true,
"debug": false,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
For further info, click here.
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.
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.