adopted-ember-addons / ember-cli-sass Goto Github PK
View Code? Open in Web Editor NEWUse node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths
License: MIT License
Use node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths
License: MIT License
Getting this:
npm install ember-cli-sass --save-dev
npm ERR! fetch failed https://registry.npmjs.org/center-align/-/center-align-0.1.1.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND registry.npmjs.org
npm ERR! fetch failed https://registry.npmjs.org/async/-/async-1.2.1.tgz
npm WARN retry will retry, error on last attempt: Error: connect ETIMEDOUT
...
npm keeps spinning forever.. is it just me?
As an Ember and Ember-cli user I am a little bit lost how these two packages are different. We used to use https://www.npmjs.com/package/broccoli-sass, but now we came over this addon and I am wondering what are use-cases to use one or another?
I see both of them use node-sass internally. Thanks in advance.
I attempted to import a file called "_colors.scss" into my app.scss manifest with @import "colors";
In my _colors.scss partial I have a color varible defined as:
$blue_1: #527D9D;
When I try to use that variable the ember-cli build fails with the error Undefined variable: "$blue-1".
The SASS documentation states - "For historical reasons, variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a variable called $main-width, you can access it as $main_width, and vice versa."
Is there some config property that needs to be set that allows you to use _ and - interchangebly? or to stop the compiler from converting my _'s to -'s?
Thanks in advance
I'm using Bourbon's linear-gradient mixin and ember-cli-sass is generating incorrect css. I provide the following input:
%some-color {
@include linear-gradient(to bottom, #151A20 0%, #0B0E11 100%);
}
.my-class {
@extend %some-color
}
and I receive the following output from ember-cli-sass:
.my-class {
background-image: linear-gradient(to bottom,#151A20 0%, #0B0E11 100%, , , , , , , , ); }
whereas compiling with sass 3.4.13 running on ruby gives the correct css:
.my-class {
background-image: linear-gradient(to bottom,#151A20 0%, #0B0E11 100%); }
There's no ability to add this to the repo so I'll file here. Broccoli-sass-source-maps relies on node-sass ^3.1.0 and 3.2.0 was released about a month ago.
Can we bump that to ^3.2.0
?
#40 and #43 are both a result of the [email protected] versions. I think that broccoli-sass should have gone to v1.0.0-beta-x version when it was upgraded to node-sass v3, but this didn't happen (and so I followed suit with ember-cli and broccoli-sass-source-maps). I now think this was a mistake, because several users have had to deal with failing builds without explicitly asking for a new version (see #40 and #43).
Here's what I've done to sort this out:
Please let me know if you're experiencing any issues with this. Hopefully this should allow people who want node-sass v3 to use the betas, and the rest of the world will just get a SASS compiler that works :)
Re-opening the issue described here: #9
When I load up my ember app I receive the following error in my console:
Failed to load resource: the server responded with a status of 404 (Not Found): http://localhost:4200/tree_merger-tmp_dest_dir-phbyksAc.tmp/app/styles/****-store.css.map
I have the following in my package.json file:
{
"name": "spark-store",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"body-parser": "^1.2.0",
"broccoli-asset-rev": "0.3.0",
"broccoli-ember-hbs-template-compiler": "^1.6.1",
"ember-cli": "0.1.1",
"ember-cli-content-security-policy": "0.1.4",
"ember-cli-ic-ajax": "0.1.1",
"ember-cli-inject-live-reload": "^1.2.2",
"ember-cli-qunit": "0.1.0",
"ember-data": "1.0.0-beta.10",
"express": "^4.8.5",
"glob": "^4.0.5",
"ember-cli-ember-data": "~0.2.0",
"ember-cli-sass": "^2.0.1"
}
}
And here is my Brocfile:
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
sassOptions: {
includePaths: [
'bower_components/bourbon/dist',
'bower_components/neat/app/assets/stylesheets',
'bower_components/ionicons/scss'
]
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
app.import('app/styles/normalize.css');
app.import('vendor/modernizr/modernizr.js');
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
module.exports = app.toTree();
Any idea what's going on?
I've been getting segmentation faults whenever I try to import scss files that have syntax errors in them. So far, I've been assiduous about linting sass, but now I'm trying to import Foundation, which would be a pain to lint.
Is this a known issue possibly related to this: sass/node-sass#20?
According to that issue, the problem traces back to an XCode setting in node-sass's binding.gyp
. But searching through the dependencies in my version of ember-cli-sass, the setting is there. So not sure what could be causing this.
I have a new ember-cli 0.2.2 app. I've tried setting sassOptions in the EmberApp constructor like so:
var app = new EmberApp({
sassOptions: {
includePaths: [
'app/styles/foo'
]
}
});
The includePaths never make it into the SassCompiler. As best I can tell it's because ember-cli-sass's setupPreprocessorRegistry
is called independently of included
. So this.app
is never set causing sassOptions
to not pick up the app's options.
I'm aware this isn't the recommended way to define includePaths. I started debugging this because I'm developing an ember add-on that needs to add to the includePaths. I'm all ears if there's a better way to do that outside of modifying the host app's app.options.sassOptions
.
In any case, it'd be great if ember-cli-sass can continue to support the old config style if only for compatibility.
I've followed the instructions in the README for creating an addon with an included addon.scss file, but no matter what I do, the styles are not getting picked up by vendor.css.
Is there anything more we need to know in order to make this work?
AS an aside: addon.css is definitely getting picked up.
If possible, please release the latest version to npm.
I was using this plugin with ember-cli v0.40 and it worked great. I just updated to ember-cli v0.46 and now get the following error:
Error: File not found: /app/styles/app.scss
in any of the following include paths:
tmp/sass_compiler-tmp_dest_dir-5Bg2iW5S.tmp
at Object.findFileSync (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/include-path-searcher/index.js:12:9)
at /Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/index.js:38:35
at $$$internal$$tryCatch (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:470:16)
at $$$internal$$invokeCallback (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:482:17)
at $$$internal$$publish (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:453:11)
at $$rsvp$asap$$flush (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:1531:9)
at process._tickCallback (node.js:419:13)
I replicated on a new app:
ember new dogs
cd dogs
mv app/styles/app.css app/styles/app.scss
npm install --save-dev broccoli-sass
npm install --save-dev ember-cli-sass
ember server
Thoughts? By the way thanks for this plugin, sourceMaps is awesome.
I am so close to using iojs! Just the last thing, it seems, that keeps it from running:
Installing/building the latest 3.1.0-beta
works fone but when running ember serve
I get the following error:
version: 0.1.12
Module did not self-register.
Error: Module did not self-register.
at Error (native)
at Module.load (module.js:341:32)
at Function.Module._load (module.js:296:12)
at Module.require (module.js:351:17)
at require (module.js:370:17)
at Object.<anonymous> (project/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/node-sass/lib/index.js:211:15)
at Module._compile (module.js:446:26)
at Object.Module._extensions..js (module.js:464:10)
at Module.load (module.js:341:32)
at Function.Module._load (module.js:296:12)
Once I remove ember-cli-sass
I can start up the server. Any idea what the issue could be? Could it be on the ember-cli side? Or something to do with node-sass?
I realize the README says to configure this addon using the Brocfile like so ...
var app = new EmberApp({
outputPaths: {
app: {
css: {
'app': '/assets/application-name.css',
'themes/alpha': '/assets/themes/alpha.css'
}
}
}
});
But most of my modern ember-cli apps use the config/environment file instead like so
module.exports = function(environment) {
var ENV = {
//tons of other configuration ...
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss',
'app/styles'
]
};
return ENV;
};
How should we configure using this to build a single app.css / and if I'm using the config example ... how should I configure it to output both app.css and another file (at the same time) ?
Hey,
it would be nicer if it defaulted to {{project}}.css just like ember-cli (with simply brocolli-sass too) does.
That way ember-cli-sass would be a drop-in replacement without further adjustments needed.
BR,
Domme
I'm setting the path in outputPaths as specified in the docs, it was working fine for everything when I was using css, but since I installed foundation-sass and sass compiler, now that parameter is being ignored, and my compiled app.scss is going to /assets/app-name.css Any ideas on how to fix this? Thanks!
Receiving the following error:
unordered_map::at: key not found
have the following in my environment.js:
sassOptions: {
includePaths: [
'bower_components/neat/app/assets/stylesheets/',
'bower_components/bourbon/app/assets/stylesheets/'
]
}
With broccoli-sass and ember-cli 0.1.15, I am able to compile multiple SASS files using the outputPaths
configuration as described here: http://www.ember-cli.com/#asset-compilation
When I replace broccoli-sass with ember-cli-sass, this no longer works. I created an example of this here: https://github.com/paulcwatts/multiple-sass
I have the configuration:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'app': '/assets/multiple.css',
'b': '/assets/b.css'
}
}
}
});
The master branch uses broccoli-sass, and the ember-cli-sass branch uses ember-cli-sass. If you build with master, you will only get two compiled CSS files: "multiple.css" and "b.css". However, in the ember-cli-sass branch, you only get "multiple-sass.css" files.
If I just wanted to simply use scss for my addon testing directory tests/dummy/app/styles/app.scss
you can not currently do this as of the beta.6
release without including an empty app/styles/app.scss
file.
Thoughts?
When I try to build ember-cli-sass
in io.js, I get this error:
> [email protected] install /Users/danielfinlay/Documents/Development/Issue Tracker/Raincheck/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/node-sass
> node build.js
child_process: customFds option is deprecated, use stdio instead.
child_process: customFds option is deprecated, use stdio instead.
CXX(target) Release/obj.target/binding/binding.o
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:481:19: error: no type named 'ExternalAsciiStringResource' in 'v8::String'; did you mean 'ExternalStringResource'?
v8::String::ExternalAsciiStringResource *resource) {
~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~
ExternalStringResource
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:2016:19: note: 'ExternalStringResource' declared here
class V8_EXPORT ExternalStringResource
^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:480:36: error: redefinition of 'NanNew'
NAN_INLINE v8::Local<v8::String> NanNew(
^
../node_modules/nan/nan.h:475:36: note: previous definition is here
NAN_INLINE v8::Local<v8::String> NanNew(
^
../node_modules/nan/nan.h:2103:12: error: no member named 'IsExternalAscii' in 'v8::String'; did you mean 'IsExternal'?
if (str->IsExternalAscii()) {
^~~~~~~~~~~~~~~
IsExternal
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:1980:8: note: 'IsExternal' declared here
bool IsExternal() const;
^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:2104:23: error: no type named 'ExternalAsciiStringResource' in 'v8::String'; did you mean 'ExternalStringResource'?
const v8::String::ExternalAsciiStringResource* ext;
~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~
ExternalStringResource
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:2016:19: note: 'ExternalStringResource' declared here
class V8_EXPORT ExternalStringResource
^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:2105:16: error: no member named 'GetExternalAsciiStringResource' in 'v8::String'; did you mean 'GetExternalOneByteStringResource'?
ext = str->GetExternalAsciiStringResource();
^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GetExternalOneByteStringResource
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:2083:40: note: 'GetExternalOneByteStringResource' declared here
const ExternalOneByteStringResource* GetExternalOneByteStringResource() const;
^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:2105:9: error: assigning to 'const v8::String::ExternalStringResource *' from incompatible type 'const v8::String::ExternalOneByteStringResource *'
ext = str->GetExternalAsciiStringResource();
^ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:2106:11: error: assigning to 'const char *' from incompatible type 'const uint16_t *' (aka 'const unsigned short *')
*data = ext->data();
^ ~~~~~~~~~~~
7 errors generated.
make: *** [Release/obj.target/binding/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23)
gyp ERR! stack at emitTwo (events.js:85:13)
gyp ERR! stack at ChildProcess.emit (events.js:153:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:1044:12)
gyp ERR! System Darwin 14.0.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
Hey there I was wondering, how do I import something like susy (http://susy.oddbird.net/) into the scss. It is installed using gem install susy. I used to be able place @import "susy"; in my scss code and it would import the ruby package. I mean I have been able to load bower scss partials in just fine but not ruby packages.
Hello,
Thanks for the add-on, makes life easier.
I'm getting a 404
on the map file, do you know what might be going on? Here's the error (sff
is my app's name): Cannot GET /tree_merger-tmp_dest_dir-QOjYyRtz.tmp/app/styles/sff.css.map
Thanks.
Hey,
although the css lines are properly matched to the scss files and lines it's not possible to view the .scss at the matched position.
The source map points the browser to urls like:
http://0.0.0.0:4200/assets/tmp/tree_merger-tmp_dest_dir-ipPMXqqo.tmp//app/styles/app.scss
... which are not available from the server.
Thanks for the great work already, you're making my designer really happy! 👍
BR,
Domme
Right now my ember-cli app serves a single css file that appears to be the app.scss -transformed. I do have foundation in my bower_components dir but it doesn't appear to be included when I host the app and hit it from the browser.
Can you confirm this works as expected w/ the latest 0.1.3 of ember-cli?
https://github.com/aexmachina/ember-cli-sass/blob/master/index.js#L18
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
}
});
@aexmachina ember-cli-sass 3.2.1 depends on broccoli-sass-source-maps 0.6.2, which doesn't seem to exist (the only release/tags I see on that GitHub project are 0.6.0). When I did an npm install on my project, 0.6.2 brought in node-sass 3.0.0-pre. I see that 0.6.0 depends on 3.0.0-alpha.0, which is also not the latest version of node-sass. I would gladly update broccoli-sass-source-maps to depend on 3.0.0-alpha.1, but I'm confused by the lack of a 0.6.2 tag anywhere on the project. Did it get deleted? If so, why is ember-cli-sass dependent on a non-existent version tag?
An app I'm working on is attempting to install broccoli-sass-source-maps, seemingly as a dependency of ember-cli-sass 3.3.0 (it's referencing "^3.2.2" in package.json), and the install is failing with the following error:
npm ERR! notarget No compatible version found: broccoli-sass-source-maps@'>=0.7.0 <0.8.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.6.2","0.6.3","1.0.0-beta.1","1.0.0-beta.4"]
I tried this initially on a brand new DigitalOcean droplet, so I don't think caching is an issue. Have also tried the same on my local machine, and am seeing the same error.
I'm fairly new to node, so I'm unsure if this is just an oversight in publishing a package to npm, or if that's even a thing. Let me know if you need any more info from me.
I don't know if there's anything we can do in this addon, but my build is extremely slow for building sass:
Right now, my sass builds takes > 20 seconds on each save. It would be nice to only incur that delay when I change styles. I think the biggest thing is that we recompile all the sass anytime any of the files change. Is there a way to only rebuild when something in app/styles
changes?
Cold Build:
Build successful - 51632ms.
Slowest Trees | Total
----------------------------------------------+---------------------
SassCompiler | 20416ms
Babel | 7292ms
Babel | 4652ms
CoffeeScriptFilter | 2922ms
ES6: App Tree | 2773ms
Slowest Trees (cumulative) | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1) | 20416ms
Babel (8) | 12836ms (1604 ms)
CoffeeScriptFilter (2) | 4721ms (2360 ms)
ES6: App Tree (1) | 2773ms
Subsequent:
file changed adapters/customer.coffee
Build successful - 25769ms.
Slowest Trees | Total
----------------------------------------------+---------------------
SassCompiler | 20473ms
Slowest Trees (cumulative) | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1) | 20473ms
I’m using your plugin and had a question - is there a way to produce app.css and vendor.css?
For example I want to put all the bootstrap scss into vendor.css and my app scss into app.scss...
Hello
I'm trying to set the includePaths
for bootstrap-sass-official but I can't seem to get it to work. I'm not sure what I'm doing wrong.
The Bootstrap SCSS files are in bower_components/bootstrap-sass-official/assets/stylesheets
.
[max@terror ramsch-ember]$ ls -l bower_components/bootstrap-sass-official/assets/stylesheets
total 20
drwxr-xr-x 3 max users 4096 15.12.2014 02:15 bootstrap/
-rw-r--r-- 1 max users 141 12.11.2014 18:19 _bootstrap-compass.scss
-rw-r--r-- 1 max users 720 12.11.2014 18:19 _bootstrap-mincer.scss
-rw-r--r-- 1 max users 1316 12.11.2014 18:19 _bootstrap.scss
-rw-r--r-- 1 max users 131 12.11.2014 18:19 _bootstrap-sprockets.scss
So I 've added the options as follows:
var App = Ember.Application.extend({
...
sassOptions: {
includePaths: [
'bower_components/bootstrap-sass-official/assets/stylesheets'
]
}
});
And I try to include it in SCSS as follows:
@import "bootstrap/variables";
@import "bootstrap";
But that gives me an error in ember-cli:
Error: /home/max/projects/ramsch-ember/tmp/tree_merger-tmp_dest_dir-EHcg5Cac.tmp/app/styles/app.scss:3: file to import not found or unreadable: "bootstrap/variables"
If I remove @import "bootstrap/variables";
the same happens with just bootstrap
.
I have to include it using the full path in order to make it work:
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
So I'm assuming that there's a probem with includePaths
.
Do you have an idea what I might be doing wrong?
Getting:
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> (/private/tmp/blap/node_modules/ember-cli-sass/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> (/private/tmp/blap/node_modules/ember-cli/node_modules/npm/lib/utils/lifecycle.js:213:16)
at EventEmitter.emit (events.js:110:17)
at ChildProcess.<anonymous> (/private/tmp/blap/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)
@if compass-env()=='development' {
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
}
That seems to be the common way in SCSS to add conditional logic, but currently doesn't appear to do anything. Could you add a function (ember-env or just env?) to allow a different SCSS on each environment.
Thanks
The current beta5 of node-sass introduced some bugs together with the foundation scss. An issue on the upstream project is open.
This leads to the behavior, that ember-cli does not compile the sccs of foundation anymore, with the following error:
File: bower_components/foundation/scss/foundation/components/_forms.scss (335) expected a variable name (e.g. $x) or ')' for the parameter list for url
To anyone else having this problem:
downgrade your node-sass version in the ember-cli-sass module to beta4 fixes this problem.
Upstream Issues:
sass/libsass#1059
sass/node-sass#840
In the last CLI update, the sass compiler started tripping over embedded fonts:
@font-face
{
font-family: OpenSansBold;
font-weight: normal;
font-style: normal;
src: url(data:font/ttf;base64,AAEAAAATAQAABAAwRFNJR5IYdDoAA1fcAAAVdEdERUYAJgOvAANTvAAAAB5HUE9TCzcPNwADU9wAAAA4R1NVQg4rPbcAA1QUAAADxk9TLzKidaEYAAABuAAAAGBjbWFwKasvaAAAELQAAAQaY3Z0IBMtGpQAAB2oAAAAqmZwZ227c6R1AAAU0AAAB+BnYXNwAAgAGwADU7AAAAAMZ2x5Zh1/yvQAACWsAAFLxGhlYWT34ccOAAABPAAAADZoaGVhDikKUgAAAXQAAAAkaG10eCTSBgAAAAIYAAAOmmtlcm5UKwl+AAFxcAABtjZsb2NhsttgKwAAHlQAAAdWbWF4cAU1Ah8AAAGYAAAAIG5hbWW8ZnsiAAMnqAAABdxwb3N0AkPvbAADLYQAACYrcHJlcMgJ/GsAABywAAAA+AABAAAAARmaOqk5s18PPPUACQgAAAAAAMlCF6AAAAAAyehKofsM/agKjQiNAAEACQACAAAAAAAAAAEAAAiN/agAAAqN+wz+eQqNAAEAAAAAAAAAAAAAAAAAAAOjAAEAAAOqAIoAFgBYAAUAAgAQAC8AXAAAAQABCwADAAEAAwUPArwABQAIBZoFMwAAAR8FmgUzAAAD0QBmAfwIAgILCAYDBQQCAgTgAALvQAAgWwAAACgAAAAAMUFTQwAgACD//QYf/hQAhAiNAlggAAGfAAAAAAReBbYAAAAgAAMEzQDBAAAAAAQUAAACFAAAAkoAdQPHAIUFKwAtBJEAWAc1AD8GAABSAiEAhQK2AFICtgA9BFwAPwSRAFgCUgA/ApMAPQJIAHUDTgAOBJEASgSRAHkEkQBOBJEATgSRACMEkQBkBJEASASRADcEkQBIBJEAQgJIAHUCUgA/BJEAWASRAFgEkQBYA9EABgctAGYFhQAABWAAuAUZAHcF7AC4BHsAuARkALgFywB3Bh8AuAMdAEICpv9oBVAAuASFALgHiwC4BoEAuAZeAHcFBgC4Bl4AdwVIALgEaABeBKIAKQYMAK4FMwAAB7wAAAVWAAAE/gAABKIAMQKmAI8DTgAMAqYAMwRCAAgDSv/8BNsBTATVAFYFEACgBB0AXAUQAFwEugBcAxkAKQSFAAYFQgCgAnEAkwJx/30E9gCgAnEAoAfbAKAFQgCgBPQAXAUQAKAFEABcA6IAoAP6AFwDeQAvBUIAmgSNAAAG2QAUBKAACgSNAAAD5wA3AycAHwRoAccDJwBSBJEAWAIUAAACSgB1BJEAjwSRAFIEkQBxBJEABgRoAccD4wBqBNsBFwaoAGQDEAAvBOwAUgSRAFgCkwA9BqgAZAQA//oDbQBcBJEAWAMIAC8DCAA7BNsBTAVIAKAFPQBxAkgAdQGk/9sDCABcAxsAOQTsAFIHDAAuBwwALgcMAFoD0QA9BYUAAAWFAAAFhQAABYUAAAWFAAAFhQAAB54AAAUZAHcEewC4BHsAuAR7AK8EewC4Ax0AKgMdAEIDHf/cAx0AOQXsAC8GgQC4Bl4AdwZeAHcGXgB3Bl4AdwZeAHcEkQCBBl4AdwYMAK4GDACuBgwArgYMAK4E/gAABQYAuAWwAKAE1QBWBNUAVgTVAFYE1QBWBNUAVgTVAFYHVgBWBB0AXAS6AFwEugBcBLoAXAS6AFwCcf+bAnEAkQJx/4YCcf/jBPQAXAVCAKAE9ABcBPQAXAT0AFwE9ABcBPQAXASRAFgE9ABcBUIAmgVCAJoFQgCaBUIAmgSNAAAFEACgBI0AAAWFAAAE1QBWBYUAAATVAFYFhQAABNUAVgUZAHcEHQBcBRkAdwQdAFwFGQB3BB0AXAUZAHcEHQBcBewAuAUQAFwF7AAvBTEAXAR7ALgEugBcBHsAuAS6AFwEewC4BLoAXAR7ALgEugBcBHsArwS6AFwFywB3BIUABgXLAHcEhQAGBcsAdwSFAAYFywB3BIUABgYfALgFQgCgBh8AAAVCAAQDHf/xAnH/mwMdAD8Ccf/pAx0ABwJx/68DHQBCAnEAKwMdAEICcQCgBcMAQgS6AJMCpv9oAnH/fQVQALgE9gCgBPYAoASFALgCcQCgBIUAuAJxAGMEhQC4AnEAoASFALgDbQCgBIUAAgKkAAAGgQC4BUIAoAaBALgFQgCgBoEAuAVCAKAGOwAGBoEAuAVCAKAGXgB3BPQAXAZeAHcE9ABcBl4AdwT0AFwHyQB3B9MAXAVIALgDogCgBUgAuAOiAGMFSAC4A6IAUwRoAF4D+gBcBGgAXgP6AFwEaABeA/oAXARoAF4D+gBcBKIAKQN5AC8EogApA3kALwSiACkDeQAvBgwArgVCAJoGDACuBUIAmgYMAK4FQgCaBgwArgVCAJoGDACuBUIAmgYMAK4FQgCaB7wAAAbZABQE/gAABI0AAAT+AAAEogAx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
}
If I comment out the URL, it works. Otherwise it throws "expected a variable name (e.g. $x) or ')' for the parameter list for url"
According to the foundation-apps 1.1 changelog (https://github.com/zurb/foundation-apps/releases) it is completely libsass compatible, but I am getting the following error which is only mildly useful:
File: bower_components/foundation-apps/scss/vendor/_normalize.scss (288)
invalid top-level expression
Error: invalid top-level expression
at options.error (projects/client/node_modules/ember-cli-sass/node_modules/broccoli-sass-source-maps/node_modules/node-sass/lib/index.js:261:32)
Does that mean the error is in line 288 of _normalize.scss
? This would be the following:
button, /* line 288 */
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
Still looking into it, if I can fix it/find a workaround but just wanted to report it.
I have tried setting the sassOptions
as follows in my app.js
but importing from bower_components doesn't seem to work:
sassOptions: {
includePaths: ['vendor', 'bower_components']
}
Explicitly importing as follows does work:
@import 'bower_components/normalize-scss/normalize';
Any ideas?
ember-cli 2.2.2
ember 1.12 b1
Build failed.
File: bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_forms.scss (189)
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 bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_input-groups.scss
Works if I switch to "broccoli-sass": "git://github.com/ef4/broccoli-sass"
but this doesnt have a sourceMap option.
After following the helpful advice from @aexmachina in the broccoli-sass issue joliss/broccoli-sass#18 which details creating/mapping local filesystem directories and files in the Chrome workspace, I feel like I'm really close to the solution but I'm having one remaining issue.
The SourceMappingURL generated at the bottom of my app's output css file seems to need an extra 'tmp' in the URL reference. After creating a network mapping from the network file assets/my-app.css
to temporary filesystem file (in the workspace) at my-app/tmp/tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css
, the GET request for the mapping file that returns a 404 is to the URL http://localhost:4200/tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css.map
.
Maybe the SourceMappingURL at the bottom should be something like /*# sourceMappingURL=../../tmp/tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css.map */
instead of /*# sourceMappingURL=../../tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css.map */
? Or is there another way I could map my directory structure/change input/output file paths to better fit this?
Thanks for the awesome open source work! I'm migrating to ember-cli and have been looking for something that will help me migrate all the scss work I've got thus far. 3 questions for you
What ist the difference?
When instantiating EmberApp
we can change the location of the styles directory. A client application shares styles between multiple ember apps with the following structure:
└── app_1
├── app_2
├── app_3
└── dependencies
├── styles
so in each App
we declare the styles tree to be:
new EmberApp({
trees: {
styles: '../dependencies/styles'
}
});
This was just fine with a combination of Ember 1.10, ember-cli 0.2, and embrer-cli-sass 2.0.x.
Upgrading everything is broken. My research has shown that ember-cli-sass is trying to verify the existence of style files in ./app/styles
regardless of the style tree location override: https://github.com/aexmachina/ember-cli-sass/blob/master/index.js#L36
higher up the food chain ember-cli will Funnel all style trees for the app into app/styles
to normalize how everything acts upon it. This would be fine but ember-cli-sass is checking for the existance of this path from the cwd of the project rather than within the tree that is passed in.
At the point of execution that these checks are done the tree has not been run and so there is no directory yet. I realize that this check is done for performance reasons but I would advocate to move this check into the lower level of the Broccoli handling and wait for the tree to be available to act up to check for the existence of files to be acted upon.
If this is agreeable I can write up a PR.
After including node-neat and when using this...
var app = new EmberApp({
sassOptions: {
includePaths: require('node-neat').includePaths
}
});
I get seg faults when trying to access these from my scss file...
@import "bourbon/bourbon";
@import "neat-helpers";
@import "neat/neat";
Serving on http://0.0.0.0:4200
Segmentation fault: 11
Any trick to getting this to work with the CLI?
version: 0.0.40
Cannot read property 'outputFile' of undefinedTypeError: Cannot read property 'outputFile' of undefined
at EmberCLISASS.included (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli-sass/index.js:33:31)
at EmberApp. (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli/lib/broccoli/ember-app.js:172:13)
at Array.forEach (native)
at EmberApp._notifyAddonIncluded (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli/lib/broccoli/ember-app.js:170:23)
at new EmberApp (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli/lib/broccoli/ember-app.js:165:8)
at Object. (/Users/michael/Documents/rubywork/ishop/ember/Brocfile.js:5:11)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
As I see it, the README.md doesn't require sassOptions must be provided even if I just want the default value.
So maybe we should provide the default value when user add this property.
Or we should make it clear in README.md.
Thank you.
How can I configure ember-cli-sass to not create sourcemap(s) for production environment? Is that currently possible?
I am running on ember-cli 0.1.12
and just tried 3.1.0-beta4
and getting the error
File: project/tmp/tree_merger-tmp_dest_dir-Wf2Du1Zo.tmp/app/styles/_settings.scss (58)
file to import not found or unreadable: foundation/functions
Current dir: project/tmp/tree_merger-tmp_dest_dir-Wf2Du1Zo.tmp/app/styles/
If I go back to 3.1.0-beta
it works just fine.
❯ ember s
version: 0.2.0-beta.1
Cannot read property 'options' of undefined
TypeError: Cannot read property 'options' of undefined
at Class.module.exports.sassOptions (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli-sass/index.js:34:17)
at Class.module.exports.setupPreprocessorRegistry (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli-sass/index.js:45:45)
at Object.module.exports.setupRegistry (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/preprocessors.js:43:16)
at Class.Addon (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/addon.js:81:5)
at new Class (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/node_modules/core-object/core-object.js:16:17)
at /home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/addons-factory.js:44:19
at visit (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/utilities/DAG.js:23:3)
at DAG.topsort (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/utilities/DAG.js:82:7)
at AddonsFactory.initializeAddons (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/addons-factory.js:40:9)
at Project.initializeAddons (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/project.js:310:36)
Thisis the line causing problems
Trying to install into a fresh project (using both ember install
and npm install
) results in:
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/Users/daw/.nvm/versions/node/v0.12.2/bin/npm" "install" "[email protected]"
npm ERR! node v0.12.2
npm ERR! npm v2.7.3
npm ERR! code ETARGET
npm ERR! notarget No compatible version found: node-sass@'>=3.0.0 <4.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.9.4-rc1","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.5","0.2.6","0.3.0","0.4.0","0.4.1","0.4.2","0.4.3","0.4.4","0.5.0","0.5.1","0.5.2","0.5.3","0.5.4","0.6.0","0.6.1","0.6.2","0.6.3","0.6.4","0.6.5","0.6.6","0.6.7","0.7.0-alpha","0.7.0","0.8.0","0.8.1","0.8.2","0.8.3","0.8.4","0.8.5","0.8.6","0.9.0","0.9.1","0.9.2","0.9.3","0.9.4-rc1","0.9.4","0.9.5-rc1","0.9.5","0.9.6","1.0.0","1.0.1","1.0.2-alpha","1.0.2","1.0.3","1.1.0","1.1.1","1.1.2","1.1.3","1.1.4","1.2.0","1.2.1","1.2.2","1.2.3","2.0.0-beta","2.0.0","2.0.1","3.0.0-alpha.0","3.0.0-beta.2","3.0.0-beta.3","3.0.0-beta.4","2.1.0","2.1.1","3.0.0-beta.5"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'ember-cli-sass'
npm ERR! notarget
Looking at node-sass, it looks like 2.1.1 is the latest release, but this package depends on broccoli-sass-source-maps, which depends on node-sass ^3.0.0 as a peer dependency.
Not sure how that's possible, perhaps node-sass unpublished a node package?
I've just installed and created app/styles/app.scss
, but when I start with ember server
the .css file is not created. Is there any other set up I need, other than npm install --save-dev ember-cli-sass
?
Is there a way to output exactly what's happening in the build process so that I can debug it?
Hey,
If some of you getting error using bootstrap-sass, it's a problem in node-sass / sasslib.
You can use [email protected] until the'll fix the problem.
Cheers.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.