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
Related
I've just started noticing something strange in VSCode 1.24.1 on MacOS 10.12.6 Sierra.
My file explorer has been marking my current working directories as "unresolved". This does not prevent me from doing anything I normally would though I am wondering why this is happening. The folder name will be yellow and will be marked with an ! on the right.
I've tried closing and reopening the directories in my file explorer, restarting VSCode itself and moving the folder to a separate directory. Nothing doing.
I haven't been able to find much on the issue except in the case of people working in Typescript files that aren't properly configured in a manifest file on React projects. These are mostly HTML/CSS/Sass/JS/MySQL.
Any insight would be appreciated, thank you.
I was having the same issue on Windows when I had previously created different projects on the undefined workspace (the default workdspace of VSCode).
When I create a workspace and I placed my root folders inside this one workspace, it will warn that it could not resolve workspace folder.
You have to edit your workspace config file, change the path of your folders and then restart VSCode.
On the VSCode command palette, type: workspace config - then choose "Open workspace configuration file."
You should have something like this:
{
"folders": [
{
"path": "OneProject"
},
{
"path": "AnotherProject"
}
],
"settings": {}
}
What you want is something like this:
{
"folders": [
{
"path": "C:/Somewhere/OneProject"
},
{
"path": "C:/Somewhere/AnotherProject"
}
],
"settings": {}
}
It's a known issue, it was fixed here - https://github.com/Microsoft/vscode/issues/50866
As of the 1.24.1 version it's not yet available. But the fix listed above should correct the problem you are having.
Replace ${workspaceFolder} with ${FOLDER_NAME:workspaceFolder} in your *.code-workspace file. (from here)
By the way, same goes to ${workspaceRoot}, you can replace it with ${FOLDER_NAME:workspaceRoot}.
Any more folder variables ca be fixed with this FOLDER_NAME: prefix? My workspaces did not use them so far.
Worked for me in Version: 1.44.2.
I had this issue also with VS and also showing an exclamation mark as well as the error code you have said, my solution was to go into my work folder where my file was located and in that folder i right clicked and re-arranged the folder so it was showing them as application order and it got rid of the error code and exclamation mark.
In my case I resolved this by restarting the WSL machine by writing the following in the windows cmd
wsl --shutdown
take care this might stop running docker containers and other related processes.
Then I started a new wsl terminal and vscode worked like a charm.
I deleted the folder and created a new one with a different name and it was fixed. No workspace config file fix needed as it fixes/updates itself when you change folder structure and update projects.
Please, remember to check what you opened. I struggled for this very stupid error for a day.
If you open VSCode, and then Open Folder, and then Add Folder, do not execpt theat ${workspaceFolder} will be you last folder, or the folder of your code. Its valeue will be the first folder you added...
I'm using the asp.net 5 typescript skeleton. When I bundle the application, inside the "dist" folder, I'm seeing a bunch of html and js files. According to the bundles.js file as in:
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
If I'm thinking correctly, I should the the bundled version of those file with an app-build.html and app-build.js, yes. Instead I see all the files basically within the "src" folder.
What is working correctly though is the aurelia.js file is being generated properly from the following:
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-materialize-bridge",
"aurelia-bootstrapper",
"aurelia-fetch-client",
more stuff here...
I haven't changed the skeleton at all. Just trying to get things to work.
Any ideas what may be going on?
Thank much
I'm not sure I understand your question completely and I'm not using the asp.net version of the skeleton but my Aurelia Typescript app has the following bundle config:
"dist/app-build": {
"includes": [
"[*.js]",
"*.html!text",
"[*/**/*.js]",
"*/**/*.html!text",
"*/**/*.css!text"
]
In my case index.html, app.ts (view root) and main.ts (aurelia config) are located in the 'root' folder src. The rest of my code is located in subdirectories.
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
I've been trying to configure SublimeLinter to use different JSHint settings, but my settings are being totally ignored. Mostly I just want to be able to use double quotes without getting a linting error. Here's what I have in my 'User' SublimeLinter.sublime-settings
{
"jshint_options":
{
"evil": true,
"regexdash": true,
"browser": true,
"wsh": true,
"sub": true,
"quotmark" : true
}
}
The file is definitely being parsed, as it throws an error whenever it's not properly formatted (amusingly this includes whenever the strings are wrapped in single quotes). It's also ignoring more than just the quote preference- I can set "evil" to false and it'll still give me eval warnings.
Any ideas? This is on OSX.
Thanks in advance.
FYI just in case: jshint_options is no longer available on SublimeLinter-jshint and settings are now set with .jshintrc files. See this and this.
I had the exact same problem. The default .jshintrc in "sublime/preferences/package settings/js hint/set linting preferences" did absolutely nothing for me either.
In order to fix it, I created a .jshintrc file in the root folder of the web project I was working on. I then opened the folder through sublime text and sublinter/jshint picked up my settings.
Maybe your Jshint options are overridden by a .jshinrc file. According to SublimeLinter README file :
SublimeLinter supports .jshintrc files. If using JSHint, SublimeLinter will recursively search the directory tree (from the file location to the file-system root directory). This functionality is specified in the JSHint README.
and
The jshint follows convention set by node-jshint (though node is not required) and will attempt to locate the configuration file for you starting in pwd. (or "present working directory") If this does not yield a .jshintrc file, it will move one level up (..) the directory tree all the way up to the filesystem root. If a file is found, it stops immediately and uses that set of configuration instead of "jshint_options".
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.