-
-
Notifications
You must be signed in to change notification settings - Fork 103
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature request]: Custom attribute scoped CSS #581
Comments
@pndewit and importing css in attribute class does not produce the desired result? |
Good point, noticed the css import statements here: http://aurelia.io/docs/tutorials/creating-a-contact-manager#building-the-application-shell. But it's not working :( |
@pndewit it should work. how are you bundling/loading? |
@Alexander-Taran I now see during my build it is showing the following output (changed paths to the bootstrap example):
And as can be read from that piece, I am using Aurelia CLI. |
Using the text loader and injecting the styles myself works:
Are the docs incorrect? Or am I missing something? |
sorry to comment on a closed issue, This will work when you know the loader for your css is the any solutions to handle this? |
See aurelia/cli#976
Or use inline css string inside JS file, then do |
@huochunpeng Thanks for the extra options, but I can't use these in my case. |
@huochunpeng
My bad, I thought it is. I currently use |
I just tested it to be sure and it gets ignored. 😞 |
I see. It should be doable to implement another decorator which purely brings in css deps. As long as the non-component class is loaded by aurelia DI, it could work. But I recall a problem with our webpack default setup. aurelia/cli#911 Since css importing is not a standard js feature. No matter how to write the import, for webpack users, it depends on whether they use style-loader, and how they config the style-loader. It is not in the control of the plugin author. The reliable way is:
Otherwise, do nothing, then instruct the users of your plugin to manually do Hope this clarified some bits. |
I had seen the issue you mentioned above, I just I have one questions is the built-in bundler using requireJS also depends on webpack? I had the problem with that configuration and not webpack.
That definitely clarified, thanks 🙏 |
Thanks @huochunpeng! 👍
This is what I have been doing for the last year or so. Since I am having a monorepo for Aurelia components (custom- elements and attributes) that is based on another monorepo (also maintained by myself) which contains the actual styles for a Material theme, this is generating quite a long list of imports in the base HTML in some cases. Thus my motivation to search for another solution 😄 Note: I am also using RequireJS. |
Cli requirejs does not use webpack at all. The PR for requirejs setup to support import css in js is not merged yet. |
I'm submitting a feature request
I am not really sure if this is the right project to submit this request in, but I didn't know which one to put it in.
I am building an Aurelia adapter for Material Design and this adapter contains both custom elements and custom attributes. For each component I need to include the component's Material Design CSS file and for elements this is easy (using either
<require from="...">
or the viewResources decorator). But I would really like to accomplish the same thing for my custom attributes.The text was updated successfully, but these errors were encountered: