Comments (4)
Did you double checked that you are using the same Bootstrap version before and afterwards? And the same version of Ember CLI SASS? Is the error getting away if you use Ember Bootstrap but continue to integrate Bootstrap SASS in the build manually?
from ember-bootstrap.
Thanks for responding @jelhan.
Did you double checked that you are using the same Bootstrap version before and afterwards?
I changed the variable overrides without upgrading or changing any dependencies. I'm not sure I follow but these are my dependency versions:
ember-ui % npm ls bootstrap
└── [email protected]
npm ls ember-bootstrap
─ [email protected]
And the same version of Ember CLI SASS?
I didn't change the dependency either. I only changed the override value to use a SassScript with a css variable inside.
ember-ui % npm ls ember-cli
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]
Is the error getting away if you use Ember Bootstrap but continue to integrate Bootstrap SASS in the build manually?
I'm not sure I follow. Can you explain how I would go about testing this? I'm updating the variable override in the bootstrap overrides file in one of the files that is manually updated in the app.scss
.
<!-- index.html -->
<!-- toggle with media query -->
<style>
--__color-text-primary: #00000;
</style>
// app.scss
// Define Bootstrap variables and override with css variables
@import 'variables';
// ember-bootstrap import
@import 'ember-bootstrap/bootstrap';
// _variables.scss
$black: #{var(--__color-text-primary)};
Investigating, this may be due to this instead https://stackoverflow.com/questions/61397995/css-variable-not-working-within-scss-when-i-use-var-and-rgba. No hex codes were used previously so I don't know why that would affect things rather than rgba
I also tried directly importing the css into the app.scss
// app.scss
// define css variables
@import 'definition-variables';
// Define Bootstrap variables and override with css variables
@import 'variables';
// ember-bootstrap import
@import 'ember-bootstrap/bootstrap';
// definition-variables.css
:root {
--__color-text-primary: #00000;
}
from ember-bootstrap.
Got it. I thought it was an issue introduced by migrating to Ember Bootstrap.
The error tells you that it's not a valid color.
$black: #{var(--__color-text-primary)};
The #
looks wrong to me. Could be caused by that. Or the Bootstrap utility does not support CSS custom properties. Support for those is still limited.
from ember-bootstrap.
Going to close this issue as it's not related to Ember Bootstrap. StackOverflow might a good place for this question.
from ember-bootstrap.
Related Issues (20)
- Run tests on Safari again HOT 2
- Remove subclassing deprecation message
- Drop RSVP dependency
- Road to TypeScript HOT 16
- Review need of custom CSS HOT 2
- Deprecate Bootstrap CSS, fonts, and theme import
- Deprecate inserting wormhole target HOT 1
- Improve public API for <BsDropdown>
- Bootstrap 5 dropdown direction and menu alignment HOT 5
- BsCarousel indicators are missing `aria-label` attribute.
- BsCarousel customizable controls are not working HOT 1
- Tracking issue: ember-bootstrap 7.0.0
- Deprecate ember-bootstrap blueprints HOT 2
- [6.1.0] {{on 'click'}}, <LinkTo> and <menu.linkTo> in dropdown menus dysfunctional HOT 8
- Test app does not rebuild when doing changes to the library HOT 2
- TypeScript files are published and not transpiled to JavaScript before HOT 5
- Tooltips are positioned too close to triggering element HOT 10
- Support responsive alignment for dropdown menu
- No Button component API docs on www.ember-bootstrap.com
- Remove usage of action template helper and modifier HOT 2
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-bootstrap.