Giter Site home page Giter Site logo

broccoli-sass's Introduction

broccoli-sass

Build Status

The broccoli-sass plugin compiles .scss and .sass files with libsass.

Installation

npm install --save-dev broccoli-sass

Usage

var BroccoliSass = require('broccoli-sass');

var outputNode = new BroccoliSass(inputNodes, inputFile, outputFile, options);
  • inputNodes: An array of nodes that act as the include paths for libsass. If you have a single node, pass [node].

  • inputFile: Relative path of the main .scss or .sass file to compile. Broccoli-sass expects to find this file in the first input node (inputNodes[0]).

  • outputFile: Relative path of the output CSS file.

  • options: A hash of options for libsass. Supported options are imagePath, outputStyle, precision, and sourceComments.

  • annotation: A human-readable description, to tell multiple instances of this plugin apart.

Example

var appCss = new BroccoliSass(['styles', 'vendor'], 'myapp/app.scss', 'assets/app.css');

This will compile styles/myapp/app.scss with vendor as an additional load path. The appCss node will contain a single assets directory with a large compiled app.css file in it.

broccoli-sass's People

Contributors

jasalguero avatar joliss avatar kiwiupover avatar rwjblue avatar sebastianseilund avatar simonexmachina avatar treveryarrish avatar xiphiasuvella avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

broccoli-sass's Issues

Sass seems to compile when JS is changed

I was using the broccoli-sane-watcher which prints out information about slow trees and I noticed that the SassCompiler seems to execute everytime I change javascript. I thought maybe it was misnomer, but when I attached node-debugger I could see this was true.

Perhaps it's my lack of knowledge about broccoli, but I thought if a source tree was not impacted by a change, it would no rebuild. IE changing a JS file wouldn't cause my styles tree to rebuild.

Regardless, it seems like this sass compiler should have some mechanism to avoid unnecessary recompilation of styles.

import statements require full file name

I'm converting a from Rails sprockets to ember-cli and using broccoli-sass for scss compile. Just noticed that my @import statements don't work because they are in the form:

@import mixins/something

instead of

@import mixins/something.scss

Not a huge deal either way, but just wanted to bring it up in case this was something that was overlooked.

Issues with node-sass v3.0 beta versions

I'm getting several bug reports on ember-cli-sass that are resulting from the node-sass betas being incompatible with some very popular CSS libraries (such as Foundation and Bourbon). I think that broccoli-sass should use a beta version when it's using a beta version of node-sass, then if people want the new features they can use the beta, but everyone else doesn't have to deal with failing builds when the package gets updated.

One possible action here would be to create [email protected] that uses [email protected] and revert [email protected] to [email protected].

ember-cli-sass actually uses broccoli-sass-source-maps (which is a fork of this project), and though I'd ideally like to keep the versions in-sync, I think the best strategy for the end-users is to do this in broccoli-sass-source-maps to sort it out for the majority of ember-cli-sass users, and provide the v1.0 betas for those that do need node-sass v3.

Sass options are not passed through.

https://github.com/joliss/broccoli-sass/blob/master/index.js#L26-L34

Only some sass options are passed through. Each node-sass release can introduce new options and users can provide their own custom options to their custom functions (new feature in node-sass 3.0), so instead, the user's options should be cloned and then modified/augmented for the specific options that broccoli-sass cares about changing.

If you agree this is a good change, I will work on a patch.

glob as inputFile

Is there a way to do globbing with broccoli to pass multiple main.scss files to compileSass?

e.g. theme*\sass\*.scss -> theme*\css\*.css

(My use case is that we have multiple themes, each with their own main.scss, that each import several _module.scss files)

Update to node-sass 3.0.0

On node 2.0.0 (iojs), on OS X 10.10, broccoli-sass does not build. I was able to circumvent this issue by cloning the repo and changing the dependency version for node-sass to 3.0.0.

Error: `libsass` bindings not found. Try reinstalling `node-sass`?

Hi.

I'm receiving this when trying to run my project:

Error: libsass bindings not found. Try reinstalling node-sass?`

I've seen this fixed but it still doesn't work for me.

I seem to be running latest versions that should include the fix:

"broccoli-sass": "^0.4.0",
"node-sass": "^3.0.0-pre",

The problem happens on Node 0.12.0 and io.js 1.5.1. Everything works fine on Node 0.10, but 0.10 is no longer supported by Ember CLI, which i depend on.

🚑

Getting an @extend error

With the current version (0.6.3), I get:

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .input-sm" on line 48 of tmp/tree_merger-tmp_dest_dir-VAbune7B.tmp/app/styles/bootstrap/_input-groups.scss

I am using broccoli-sass in an ember-cli app (v0.2.2). Downgrading broccoli-sass to a previous version (0.6.2) doesn't render any issues:

npm uninstall --save-dev broccoli-sass
npm cache clean
npm install --save-dev [email protected]

Might be related to sass/libsass#943

.sass-cache grows infinitely

Using ember-cli, I've noticed that .sass-cache is placed in the root directory of the project. Perhaps due to the nature of how trees get build, many versions are created and this grows quite huge over time.

I see that neither broccoli-sass nor node-sass doesn't pass cache_location to the SASS compiler. The SASS docs indicate that some frameworks set this path to a /tmp directory which seems appropriate. Any opinion on where this concern would belong, either here or in ember-cli?

Epic memory leak when installing on Windows 8.1 x64

executing npm install --save-dev broccoli-sass results in OOM on the box within a very short period of time.

Also attempted npm install -g broccoli-sass

Output hangs at
PS E:> npm install -g broccoli-sass
|

[email protected] install C:\Users\Jack\AppData\Roaming\npm\node_modules\broccoli-sass\node_modules\node-sass
node build.js
win32-x64-v8-3.14 exists; testing

renderSync => render

As I understand it, broccoli prefers synchronous file i/o for performance reasons. But I don't think that broccoli should use node-sass's renderSync method. Instead, I think it should use the async render method. We need to run several hundred sass compiles per build (number of sass files times the number of locale's we support) and this should help with throughput.

@stefanpenner tells me this is very doable, but I have forgot the specifics.

If there's no objection, I can work on a patch with a few code pointers.

install fails on ember-cli 0.2.0

Running on ember-cli 0.2.0, the install fails:

$ ember install:npm broccoli-sass
The package `ember-data` is not a properly formatted package, we have used a fallback lookup to resolve it at `/Users/development/JSProjects/testComponents/node_modules/ember-data`. This is generally caused by an addon not having a `main` entry point (or `index.js`).
version: 0.2.0
Could not find watchman, falling back to NodeWatcher for file system events
Installing packages for tooling via npm.Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.0.1/darwin-x64-iojs-1.5/binding.node
Installing packages for tooling via npm..module.js:322
    throw err;
          ^
Error: Cannot find module '/Users/development/JSProjects/testComponents/node_modules/broccoli-sass/node_modules/node-sass/node_modules/pangyp/bin/node-gyp'
    at Function.Module._resolveFilename (module.js:320:15)
    at Function.Module._load (module.js:262:25)
    at Function.Module.runMain (module.js:485:10)
    at startup (node.js:112:16)
    at node.js:865:3
Build failed
Installed packages for tooling via npm.

Cannot install with ember-cli 0.2.0-beta.1

Hi,

Not sure if this should be here or in ember-cli - if this is not the place I'll move the report over there.

This is an install into a freshly generated app using [email protected]...

$ ember install:npm broccoli-sass
version: 0.2.0-beta.1
Installing packages for tooling via npm..Binary downloaded and installed at /Users/pete/ninjatronic/spikes/node_modules/broccoli-sass/node_modules/node-sass/vendor/darwin-x64/binding.node
Installing packages for tooling via npm...`darwin-x64` exists; testing
module.js:355
  Module._extensions[extension](this, filename);
                               ^
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/pete/ninjatronic/spikes/node_modules/broccoli-sass/node_modules/node-sass/lib/index.js:181:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
[email protected] postinstall: `node scripts/build.js`
Exit status 1
Error: [email protected] postinstall: `node scripts/build.js`
Exit status 1
    at EventEmitter.<anonymous> (/Users/pete/ninjatronic/spikes/node_modules/ember-cli/node_modules/npm/lib/utils/lifecycle.js:212:16)
    at EventEmitter.emit (events.js:110:17)
    at ChildProcess.<anonymous> (/Users/pete/ninjatronic/spikes/node_modules/ember-cli/node_modules/npm/lib/utils/spawn.js:14:12)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1008:16)
    at Process.ChildProcess._handle.onexit (child_process.js:1080:5)

Support Bourbon

Hi. I'm looking at how to support bourbon (http://bourbon.io) which works with node-sass, via the https://github.com/lacroixdesign/node-bourbon module.

How do supply includePaths to the broccoli-sass compiler? I looked through the code but it's non-obvious (to me). This is how the bourbon includePaths are supplied using the module in code:

var bourbon = require('node-bourbon').includePaths;

sass.render({
  file: './application.scss',
  success: function(css){
    console.log(css);
  },
  error: function(error) {
    console.log(error);
  },
  // If you have additional paths to include, do something like:
  // includePaths: bourbon.concat('other/path', 'another/path'),
  includePaths: bourbon,
  outputStyle: 'compressed'
});

So, if I can pass the bourbon includePaths in my brocfile.js to the compiler, then it should just all work.

However, at the moment, I'm getting it to work by hacking it like this:

var bourbon = broccoli.makeTree('node_modules/node-bourbon/assets/stylesheets');

var appCss = compileSass(sourceTrees.concat(bourbon), 'public/app.scss', 'assets/app.css');

But that is obviously non-optimal. And it only supports @import 'bourbon'; rather then importing individual files (same issue as bootstrap-sass).

Thanks!

can't install on iojs 1.1.0 - 1.2.0

os x 10.10.2
iojs 1.1.0 / 1.2.0 (via NVM)
npm 2.5.1

error in terminal:

npm ERR! node v1.2.0
npm ERR! npm  v2.5.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'node scripts/build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

thanks!

Source map config

Having a hard time getting source maps to work on the sample app, any chance we could add an example to the readme here?

Usage in TeamCity CI - getting error on build :: binding.node is missing. Try reinstalling `node-sass`?

I am trying to get by broccoli build setup in TeamCity. When running the build, it errors out at the point where it uses broccoli-sass.

Below is the error output. Any thoughts?

This portion is an npm install command. It seems to be testing node-sass and reporting that the tests are passing just fine.

[16:05:52][Step 3/5] npm install (56s)
[16:05:52][npm install] Executing /ls/apps/node/node-v0.10.20-linux-x64/bin/npm via wrapping shell script
[16:05:52][npm install] Starting: /ls/teamcity-ci/TeamCity/buildAgent/temp/agentTmp/wrapper7550197066346556165.sh install
[16:05:52][npm install] in directory: /ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443
[16:06:00][npm install] npm WARN package.json [email protected] No repository field.
[16:06:00][npm install] npm WARN prefer global [email protected] should be installed with -g
[16:06:00][npm install]
[16:06:00][npm install] > [email protected] install /ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443/node_modules/node-sass
[16:06:00][npm install] > node build.js
[16:06:00][npm install]
[16:06:01][npm install] linux-x64-v8-3.14 exists; testing
[16:06:01][npm install]
[16:06:02][npm install] ․․․․․․․․․․․․․․․․․․
[16:06:02][npm install]
[16:06:02][npm install] 18 passing (230ms)
[16:06:02][npm install]
[16:06:02][npm install] Binary is fine; exiting
[16:06:02][npm install]
[16:06:02][npm install] > [email protected] postinstall /ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443
[16:06:02][npm install] > bower install
[16:06:02][npm install]
[16:06:48][Step 3/5] npm update (2s)


Here's where the error occurs.

[21:59:07][Step 5/5] Starting: /ls/teamcity-ci/TeamCity/buildAgent/temp/agentTmp/custom_script8630156921635500362
[21:59:07][Step 5/5] in directory: /ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443
[21:59:08][Step 5/5]
[21:59:08][Step 5/5] /ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443/node_modules/broccoli-sass/node_modules/node-sass/sass.js:18
[21:59:08][Step 5/5] throw new Error(''+ modPath + '.node is missing. Try reinstalling node- [21:59:08][Step 5/5] ^ [21:59:08][Step 5/5] Error:/ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443/node_modules/broccoli-sass/node_modules/node-sass/bin/linux-x64-v8-3.14/binding.nodeis missing. Try reinstallingnode-sass`?
[21:59:08][Step 5/5] at Object. (/ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443/node_modules/broccoli-sass/node_modules/node-sass/sass.js:18:11)
[21:59:08][Step 5/5] at Module._compile (module.js:456:26)
[21:59:08][Step 5/5] at Object.Module._extensions..js (module.js:474:10)
[21:59:08][Step 5/5] at Module.load (module.js:356:32)
[21:59:08][Step 5/5] at Function.Module._load (module.js:312:12)
[21:59:08][Step 5/5] at Module.require (module.js:364:17)
[21:59:08][Step 5/5] at require (module.js:380:17)
[21:59:08][Step 5/5] at Object. (/ls/teamcity-ci/TeamCity/buildAgent/work/267c012b55348443/node_modules/broccoli-sass/index.js:7:12)
[21:59:08][Step 5/5] at Module._compile (module.js:456:26)
[21:59:08][Step 5/5] at Object.Module._extensions..js (module.js:474:10)
[21:59:08][Step 5/5] Process exited with code 8
[21:59:08][Step 5/5] Step Run: Broccoli Build (Command Line) failed

Error on "!global" declaration

I'm creating an Ember CLI addon, using broccoli-sass v0.2.2, and I'm importing sass from a library. But I get the following error when trying to compile:

foundation/scss/foundation/functions:13: error: error reading values after ) [string exception]

The line in question contains:

$modules: append($modules, $name) !global;

Removing the !global works, but is obviously not optimal. Is the !global simply not supported?

`sourceMappingURL=undefined` in output file

The following test case shows the issue:

var compileSass = require('broccoli-sass');

module.exports = function (broccoli) {
  return compileSass(['scss/'], 'app.scss', 'assets/app.css', {
    sourceComments: 'map'
  });
};

I previously had this issue with grunt-sass, but it's resolved now. There's an issue on node-sass that may be related.

I was able to work around this issue by replacing undefined with app.css.map in the CSS, but the source map file isn't being created.

length of undefined with latest 0.1.3 release

I'm getting the following error with the latest 0.1.3 upgrade with the ember-cli project.

Livereload server on port 31929
Serving on http://0.0.0.0:4200
Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined
    at promiseMapSeries (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-sass/node_modules/promise-map-series/index.js:4:32)
    at SassCompiler.write (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-sass/index.js:32:10)
    at SassCompiler.Writer.read (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-sass/node_modules/broccoli-writer/index.js:11:31)
    at readTree (/usr/local/lib/node_modules/ember-cli/node_modules/broccoli/lib/builder.js:61:20)
    at promise.then.then.results.(anonymous function) (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/index.js:8:27)
    at invokeCallback (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
    at publish (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
    at publishFulfillment (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
    at flush (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
    at process._tickCallback (node.js:415:13)
TypeError: Cannot read property 'length' of undefined
Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined
    at promiseMapSeries (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-sass/node_modules/promise-map-series/index.js:4:32)
    at SassCompiler.write (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-sass/index.js:32:10)
    at SassCompiler.Writer.read (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-sass/node_modules/broccoli-writer/index.js:11:31)
    at readTree (/usr/local/lib/node_modules/ember-cli/node_modules/broccoli/lib/builder.js:61:20)
    at promise.then.then.results.(anonymous function) (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/index.js:8:27)
    at invokeCallback (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
    at publish (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
    at publishFulfillment (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
    at flush (/Users/alvincrespo/Projects/embr-jobs/node_modules/broccoli-merge-trees/node_modules/promise-map-series/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
    at process._tickCallback (node.js:415:13)
TypeError: Cannot read property 'length' of undefined

When I downgraded to 0.1.2 everything worked fine. I'm not really sure what the problem may be?

[RFC] Fix source maps

Currently source maps don't really work in broccoli-sass.

There's two parts to this problem:

  1. Read: the ability to see the source SASS in dev tools
  2. Write: the ability to update the SASS in the dev tools, save your changes to the filesystem and have these changes written to the original source files

The current status is:

  • You can use broccoli-sass to generate source maps (node-sass provides source maps)
  • Unfortunately the mapping in the source map only map back to the source files as node-sass sees them, which may not be the original source files (ie. if you've used broccoli-merge-trees or any other compilation steps)
  • You can use the dev tools to create a mapping to the original source files, but the next time you start broccoli the directory path in tmp/ will have changed and the mapping no longer works.

There are a few potential solutions that have been investigated:

  1. Embed the sources in the source map using sourcesContent. This is supported in libsass now, but hasn't been exposed in node-sass. This solves the read problem, but not write. See this issue for status.
  2. Include the sources in the output tree, for example in output.css.sources/, and mutate the sources property in the source map so that they refer to this directory. This also solves the read problem, but not write. This is not necessary if option 1 works well.
  3. Create our own source map that provides the mapping from the sources files to the files that are provided to libsass and pass this to libsass, which would then append its own transformations to this file. This should allow the dev tools to map all the way back to the source files, which would solve the write problem. The developer would still need to use the workspaces feature to authorise the dev tools to write to the file system. See this issue for status on this.

Ember-cli broccoli-sass heisenbug

This happens sporadically when running ember test.

Version: 0.3.3

ember --version
version: 0.1.2
node: 0.10.33
npm: 2.1.3

Error Message:
Building...
Module did not self-register.
Error: Module did not self-register.
at Error (native)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/michaelbenin/Projects/product-timeline/node_modules/broccoli-sass/node_modules/node-sass/lib/index.js:181:15)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

Source maps reference temporary file location

Source maps work well for me, however when trying to use Google Chrome workspaces, it tries to edit the temporary file (which doesn't work). It'd be nice if the source map referenced the original location of the file.

Issue installing after running npm install

> [email protected] install /path_to_app/node_modules/broccoli-sass/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /path_to_app/node_modules/broccoli-sass/node_modules/node-sass/vendor/darwin-x64/binding.node

> [email protected] postinstall /path_to_app/node_modules/broccoli-sass/node_modules/node-sass
> node scripts/build.js

`darwin-x64` exists; testing
module.js:355
  Module._extensions[extension](this, filename);
                               ^
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/path_to_app/node_modules/broccoli-sass/node_modules/node-sass/lib/index.js:181:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "--save-dev" "broccoli-sass"
npm ERR! node v0.12.0
npm ERR! npm  v2.5.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'node scripts/build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass

update for node-sass 1.1.4

Is updating to use node-sass v1.1.4 as simple as changing the version number in the package.json file? node-sass is now supporting libsass v3, which is a requirement for me to be able to port a few projects over to use broccoli-sass rather than compass.

Find @imports in bootstrap-sass

There are 2 scenarios which can be used when @import-ing bootstrap-sass files:

  1. @import 'bootstrap';

Will @import the main scss file (which is listed in bower.main). This, in turn @import-s all the partials contained in the bootstrap/ directory. This is done like this

@import 'bootstrap/normalize';

Where the file is in ./bootstrap/_normalize.scss.

At the moment, broccoli-sass finds the main bootstrap.scss file, but can't find the partials, resulting in:

Error: tmp/tree-tmp_dest_dir-QUNXcPI7.tmp/bootstrap:2: error: file to import not found or unreadable: "bootstrap/variables"
  1. Allow @import-ing of the bootstrap partials directly from sass files. Again, the same error is produced.

I have a workaround which is to directly include the tree into the sourceTrees when compiling:

var bootstrapSass = broccoli.makeTree('bower_components/bootstrap-sass/vendor/assets/stylesheets');

var sourceTrees = [ app, styles, vendor, bootstrapSass ];

var appCss = compileSass(sourceTrees, 'public/app.scss', 'assets/app.css');

However, interestingly, that seems to throw up some compile errors in some of the partials.

Error: bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/mixins:372: error: non-terminal statement or declaration must end with ';'

Which is either an issue with bootstrap-sass or libsass, I haven't worked out yet. And obviously, unrelated to this.

Worthwhile to add unwatched dependencies?

This is more of a question than an issue, but if people think this may be a good idea, I'll give it a shot.

Basically, I have quite a few SCSS dependencies (all my bower deps like bourbon, neat, bitters, etc), none of which are expected to actually change. Adding bourbon to my project a while back ended up with me needing to up my ulimit, as broccoli was trying to stat too many files at once. (granted, that was a while back, and I don't know if broccoli still works that way). I have similar things going on with bootstrap-sass in another project.

Currently, I've changed the way I run broccoli to use the middleware functionality, so I can have a regular connect server serving up my bower_components (which is sizeable but static) without having to watch those files. This works for everything except the SCSS files in bower_components, which need to get passed in to broccoli-sass and therefore get watched unnecessarily (I won't be editing anything in bower_components).

What I'm thinking may be useful would be to split the include path into watched and unwatched bits. The watched stuff would behave just like the includepath now - generate watched trees. The unwatched stuff would just be a directory passed straight to node-sass without getting watched by broccoli.

This may also end up being premature optimization, because really - there's far fewer than 100 library SCSS files in bower_components anyway. On the other hand, I pass the directories as plain old strings to relative folders into broccoli-sass ('bower_components/bourbon', etc), so I imagine that the static compiler is actually watching all the other crap in those directories and not just the SCSS files.

Thoughts? Ideas? This may end up being one of those things that just bugs me because it's not super-elegant, but at the same time isn't a big deal.

Version 0.6.x seems much slower compared to Version 0.5.x

This may not be a broccoli-sass issue, but after upgrading to 0.6.x (which upgrades to node-sass 3.0.0) we saw much slower build times either ember-cli.

With 0.5.x:

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1)                              | 416ms
Funnel: App JS Files (1)                      | 415ms
ES6: App Tree (1)                             | 380ms
Concat: App (1)                               | 255ms
Babel (4)                                     | 166ms (41 ms)
Concat: Vendor (1)                            | 153ms
BroccoliMergeTrees (4)                        | 122ms (30 ms)

With 0.6.x:

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1)                              | 1025ms
Funnel: App JS Files (1)                      | 345ms
ES6: App Tree (1)                             | 296ms
Concat: App (1)                               | 249ms
Babel (4)                                     | 165ms (41 ms)
Concat: Vendor (1)                            | 153ms

Again, I realize this could be a node-sass issue, but I felt like I should report it here first.

@at-root directive not compiled issue

When I use the bootstrap-sass v3.3.6, the output css still contains @at-root directive.
From some research, I found it's a dependency issue of the node-sass because the bootstrap-sass Bower package requires node-sass 3.2.0+.
Any plans for upgrading node-sass?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.