.brackets.json not doing anything

[robhunt3r]

I put .brackets.json file inside my root folder, restart brackets and everything but it doesn't work.

    "path": {
        "scss/app.scss": {
            "sass.enabled": true,
            "sass.options": {
                "includePaths": [
                    "bower_components/foundation/scss/"
                ],
                "outputDir": "../css/",
                "imagePath": null,
                "sourceComments": "map",
                "outputStyle": "nested"
            }
        }
    }
}

It is rendering inside scss folder instead of css, and also using includePaths isn't working either, as I need to use the full path inside my @include otherwise it won't work.

Using latest version of brackets and plugin. No other plugins are being used.

[MichalGallovic]

I have the same problem and wasn't able to solve it.

[AlexArchive]

Same problem here.

[jasonsanjose]

@robhunt3r Just as a sanity check, the JSON you have in the issue description is missing an opening curly brace {. Is that just a copy/paste error?

[jasonsanjose]

@robhunt3r I think I might have found an issue with includePaths. As a workaround, can you try hardcoding the reference to foundation relative to your file. e.g.

// in scss/app.scss
// assuming this is your @import statement
@import "foundation"

// change it to
@import "../bower_components/foundation/scss/foundation"

UPDATE: Nevermind, I see that @robhunt3r mentions this change already:

...as I need to use the full path inside my @include otherwise it won't work.

[AlexArchive]

Not having any luck over here :c

I actually managed to get the sample project to work according to the .brackets.json file so now I think the problem lies elsewhere.

I am using bourbon.

Every now and again I get an error: "SCSS has timed out after waiting for 10000 ms" but I do not know what it means.

Using grunt-contrib-sass from Grunt compiles my Scss fine.

[AlexArchive]

My directory structure looks like this:

|  index.html
|  .brackets.json
|  assets
|  |  scss
|  |  |  vendor
|  |  |  |  bourbon
|  |  |  |  | ... (bunch of bourbon files in various directories)
|  |  |  |  bourbon-neat
|  |  |  |  | ... (bunch of bourbon-neat files in various directories)
|  |  |  base
|  |  |  |  _style.scss
|  |  |  blocks
|  |  |  |  _header.scss
|  |  |  |  _section-about.scss
|  |  |  base
|  |  |  |  _config.scss
|  |  |  main.scss
|  |  | css

And here is my .brackets.json:

{
    "path": {
        "assets/scss/main.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "..\css",
                "imagePath": null,
                "sourceComments": "map",
                "outputStyle": "nested"
            },
            "linting.collapsed": true
        }
    }
}

When I change my .scss and then save, nothing happens. Nothing ever happens.

[jasonsanjose]

@byteblast What version of bourbon are you using?

According to https://github.com/thoughtbot/bourbon/blob/1aaee0155728f254401739d9c2c0de1e94edf708/README.md#requirements...

If you are using Bourbon with LibSass, sass-rails, Compass, Foundation or need Sass 3.2 support, you should use Bourbon 3.2.x.

[AlexArchive]

I am using Bourbon 3.2.1.

[AlexArchive]

I am using Brackets 0.44 on Windows 8.1.

If you want me to test anything, please let me know.

[jasonsanjose]

@robhunt3r @MichalGallovic I think I have a fix for the includePaths issue here, can you test? https://github.com/jasonsanjose/brackets-sass/releases/tag/0.4.4-beta.

1. Download the zip
2. In Brackets, open Extension Manager
3. Drag and drop the zip from the OS to the drop target in the bottom left

I have a sample project with a similar directory setup and folder structure (that also uses foundation) that I believe validates the fix: https://github.com/jasonsanjose/brackets-sass-issues/tree/master/issue-39. Note that there the paths specified are relative to the input.scss file.

/* @robhunt3r you need to make this relative scss/app.scss, note the "../" */
"includePaths": [
  "../bower_components/foundation/scss/"
],

@byteblast I haven't dug into your issues with bourbon yet. It seems separate from the original report here about includePaths. Could be worth trying out this fix though while I investigate.

[AlexArchive]

I am sorry to say that fix doesn't solve my issue.

I will wait patiently.

[jasonsanjose]

@byteblast spun off your bourbon question as #43.

[robhunt3r]

@jasonsanjose Sorry mate, I am currently away from home developing with PHP so no brackets for me lately, by the end of the week I will go home again and test and then report :) thank you!

[jasonsanjose]

@robhunt3r No problem.

It turns out that Brackets only supports .brackets.json files at the root of projects. Based on your screenshot, your .brackets.json file is in a subfolder named viralizer. Can you change your project to make viralizer the root and see if that works?

[jasonsanjose]

@byteblast there was a terrible bug on windows where the include path got mangled. Should be good to go. Download 1.0.0-68 from extension manager.

@robhunt3r I have an example using foundation's template libsass project that you should be able to use as a guide, see https://github.com/jasonsanjose/brackets-sass/wiki/Foundation.

@byteblast I also have a Bourbon example that I tested on windows, see https://github.com/jasonsanjose/bourbon-example.

If you still have issues, please file a new bug. Thanks!

[robhunt3r]

@jasonsanjose I can confirm now that everything is working as expected yay! files are compiling inside /css/ folder and we don't need to change anything inside scss files to load properly.

[ghost]

I had to say

"outputDir": "../css",

Removing the final forward slash, then, for some reason... then it worked

{
    "path": {
        "scss/main.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css",
                "sourceComments": "map",
                "outputStyle": "nested"
            }
        }
    }
}