Comments (12)
Hi.
I had a similar problem where even after manually adding @import 'ember-power-select';
to my app.scss
file the build was failing as it couldn't reference the files.
I tried setting the path in my sassOptions (using ember-cli-sass) as below and it worked for me:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function (defaults) {
var app = new EmberApp(defaults, {
// Add options here
sassOptions: {
includePaths: ['node_modules/ember-power-select/app/styles']
}
});
...
return app.toTree();
};
from ember-power-select.
Yeah, at the moment the component's blueprint is rather naive because it tries to replace your app.scss with this line, and most likely this is only useful if this addon happens to be que very first addon you install, which is unlikely.
Issue #58 is about this, I just don't haven't had time yet.
Just to clarify, if you add @import "ember-power-select";
to your app.scss
manually it works, correct?
from ember-power-select.
@plaughton The docs clearly state:
@import "ember-power-select";
This addon will try to generate an app.scss file which contains the former statement.
Also, if you've used ember init
when an ember-cli upgrade is necessary, you'd be used to pressing [d] to get a diff on the files and make up the changes. :)
We could improve this blueprint, but it won't be as easy as we now do.
Meanwhile, I think the native ember-cli behavior is the best choice. It's a native thing, and it's documented.
from ember-power-select.
This is currently an issue for me.
Using ember install ember-power-select
installs the addon fine, but when I add the @import
line to the main <appname>.scss
it can't find the reference. Sass automatically looks in the Ruby gems directory, and expectedly finds nothing.
I should note that I'm using ember-cli-compass-compiler.
from ember-power-select.
@cbornhoft Yes, I see that being the problem. This component detects if the user has ember-cli-sass
installed (you don't have it) to import the precompiled css styles or let the user import the scss files manually.
Probably that means that using a different compiler will load the css styles in vendor, but I still think that the sass styles should be importable, because they are just files in the app/styles
folder.
Sounds like a but in ember-cli-compass-compiler more than a bug in this addon. Can you check if your vendor.css file contains any the styles of this addon?
from ember-power-select.
@cibernox That makes sense. vendor.css
within /dist/assets
is filled with all of the power-select
styles after I removed the @import
to allow compilation.
Anything that can be done to properly add these to sass/compass? Right now the only workaround I've discovered is manually adding the contents of the app/styles
directory from this repo, plus ember-basic-dropdown.scss
to the project. This clearly isn't a good solution though! Any update to the addon styling would break it without me manually updating each time.
from ember-power-select.
I'd say that your problem lies in ember-cli-compass-compiler, that looks a bit unmaintained. Any sass compiler should be able to import those files. Is upgrading to ember-cli-sass
an option?
If you're ok with not using variables to customize the styles you can just don't do anything and the recompiled styles will be loaded. You still can customize the styles normally by overriding those you don't like.
from ember-power-select.
How easy is it to compile compass with ember-cli-sass
? I don't see much mention of it in the docs. I don't think it'd be too hard at all if that's included in some way.
Thanks for your help, much appreciated.
from ember-power-select.
It would appear ember-cli-sass
does not support compilation of compass projects, since it relies on node-sass
instead of Ruby.
Is there any way to tell ember-power-select
to ignore the lack of ember-cli-sass
and use the scss files specified instead? On every compile it overwrites vendor.css
with it's own styles. it's unfortunate that there's such a lack of compass support within ember and ember-cli.
from ember-power-select.
Let's clarify how this addon works and why I believe that there is little I can do on my end.
What this addon is doing when ember-cli-sass
is present is NOT merge the precompiled styles into vendor.css: https://github.com/cibernox/ember-power-select/blob/master/index.js#L9-L21
In your case, since ember-cli-sass is not present, it is adding the styles to the vendor file.
But this addon still contains the scss files in the expected folder: https://github.com/cibernox/ember-power-select/tree/master/app/styles , so if you want you should still be able to do @import 'ember-power-select'
normally. The only problem is that styles would be duplicated (once in the vendor.css and again in the app.css).
This duplication is bad and an option to opt out to mix the precompiled styles into vendor.css can be added with little effort, but this still doesn't fix the fact that ember-cli-compass-compiler
seems to be broken because it is not allowing you to import things normally.
BTW, the last thing I heard is that libsass has reached 100% feature parity with ruby sass, so compass should be able to run on it. Although I heard that very recently and perhaps is still on master.
from ember-power-select.
I absolutely agree that it should be able to import from node_modules
. It looks like the workaround is to use Compass' own function add_import_path
which then is able to find the needed styles.
To add further to your libsass mention, it looks like Compass will never be able to work with node-sass
and the goal is to have most of the features added into node-sass
itself. See libsass comments on issue #82 for more details on its planned future.
Thanks again for your comments. This addon and the support that comes with it is absolutely fantastic! I'll rework the project to use ember-cli-sass
instead.
from ember-power-select.
Don't forget to restart you ember apps when you install an addon. :)
from ember-power-select.
Related Issues (20)
- Update ember to v4.12 & allow `ember-concurrency 3.x` as dependency
- Embroider doesn't recognize helper? HOT 1
- Types don't include Blocks or Element HOT 1
- Precompiled css doesn't contain latest changes HOT 1
- Breaking change, needs major. HOT 1
- More ergonomic customization for selected item in trigger (:named blocks) HOT 2
- website down HOT 1
- Start fails when using ember-truth-helpers 4.x HOT 3
- TS2345 in a fresh ember app
- TS not compiled away on publish? HOT 1
- Whole repo published to npm HOT 1
- Change to importable CSS HOT 11
- Help with Ember version 5 , error on element helper HOT 2
- V2 addon error: ember-power-select is trying to import from #embroider_compat but that is not one of its explicit dependencies HOT 3
- V2 addon error: Module not found: Error: Can't resolve 'ember-power-select/test-support' HOT 2
- Unable to highlight a specific object option HOT 6
- `selected` argument to `PowerSelect` component doesn't work when `0` is passed as value
- Can't resolve 'ember-power-select/helpers/ember-power-select-is-selected & `styles.js` is missing HOT 3
- Dropdown opens at wrong place (location of <BasicDropdownWormhole />?) with version 8.0.1 HOT 6
- Documentation unreachable
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-power-select.