question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

(v4 beta) some changes are missing in the npm package

See original GitHub issue

I use npm install bootstrap@4.0.0-beta to download Bootstrap into my local repo. I found some changes are missing for some components eg: _porgress.scss via npm install:

@keyframes progress-bar-stripes {
  from { background-position: $progress-height 0; }
  to { background-position: 0 0; }
}

.progress {
  display: flex;
  height: $progress-height;
  overflow: hidden; // force rounded corners by cropping it
  font-size: $progress-font-size;
  background-color: $progress-bg;
  @include border-radius($progress-border-radius);
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $progress-bar-color;
  background-color: $progress-bar-bg;
}

.progress-bar-striped {
  @include gradient-striped();
  background-size: $progress-height $progress-height;
}

.progress-bar-animated {
  animation: progress-bar-stripes $progress-bar-animation-timing;
}

_porgress.scss in the Bootstrap Repo v4.0.0-beta: https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_progress.scss

@keyframes progress-bar-stripes {
  from { background-position: $progress-height 0; }
  to { background-position: 0 0; }
}

.progress {
  display: flex;
  overflow: hidden; // force rounded corners by cropping it
  font-size: $progress-font-size;
  line-height: $progress-height;
  text-align: center;
  background-color: $progress-bg;
  @include border-radius($progress-border-radius);
  @include box-shadow($progress-box-shadow);
}

.progress-bar {
  height: $progress-height;
  line-height: $progress-height;
  color: $progress-bar-color;
  background-color: $progress-bar-bg;
  @include transition($progress-bar-transition);
}

.progress-bar-striped {
  @include gradient-striped();
  background-size: $progress-height $progress-height;
}

.progress-bar-animated {
  animation: progress-bar-stripes $progress-bar-animation-timing;
}

You can find some styling and variables eg: line-height and @include transition($progress-bar-transition) are missing in the npm package.

Does anyone have the same issue with me?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
mdocommented, Oct 3, 2017

I imagine I just had the wrong git history locally. Beta 2 hopefully this week.

2reactions
patrickheckcommented, Sep 20, 2017

Actually there is a lot differing. Here is the full list of scss files:

I generated it this way:

npm install bootstrap@4.0.0-beta
git clone https://github.com/twbs/bootstrap.git
cd bootstrap
git checkout v4.0.0-beta
diff -qr scss ../node_modules/bootstrap/scss

Output

Files node_modules/bootstrap/scss/_breadcrumb.scss and bootstrap/scss/_breadcrumb.scss differ
Files node_modules/bootstrap/scss/_custom-forms.scss and bootstrap/scss/_custom-forms.scss differ
Files node_modules/bootstrap/scss/_forms.scss and bootstrap/scss/_forms.scss differ
Files node_modules/bootstrap/scss/_input-group.scss and bootstrap/scss/_input-group.scss differ
Files node_modules/bootstrap/scss/_modal.scss and bootstrap/scss/_modal.scss differ
Files node_modules/bootstrap/scss/_progress.scss and bootstrap/scss/_progress.scss differ
Files node_modules/bootstrap/scss/_reboot.scss and bootstrap/scss/_reboot.scss differ
Files node_modules/bootstrap/scss/_variables.scss and bootstrap/scss/_variables.scss differ
Files node_modules/bootstrap/scss/utilities/_borders.scss and bootstrap/scss/utilities/_borders.scss differ
Files node_modules/bootstrap/scss/utilities/_position.scss and bootstrap/scss/utilities/_position.scss differ
Files node_modules/bootstrap/scss/utilities/_spacing.scss and bootstrap/scss/utilities/_spacing.scss differ
Files node_modules/bootstrap/scss/utilities/_text.scss and bootstrap/scss/utilities/_text.scss differ

It would be really great if this is fixed soon. Especially the fact that the docs are not matching the deployed artifacts is quite unfortunate.

Read more comments on GitHub >

github_iconTop Results From Across the Web

npm-check-updates
npm -check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.
Read more >
What could cause an error related to npm not being able to ...
1. Make sure you have the latest npm (npm install -g npm). · 2. Add an exception to your antivirus to ignore the...
Read more >
npm packages in the Package Registry - GitLab Docs
If you would like to install a package from a private project, you will need to authenticate to the Package Registry. Skip this...
Read more >
Migrating from v3 to v4 - Gatsby
Some changes required for Gatsby 4 could be applied incrementally to the latest v3 which should contribute to smoother upgrade experience. Use npm...
Read more >
Announcing TypeScript 4.7 Beta - Microsoft Developer Blogs
js files are interpreted as ES modules or CommonJS modules, and defaults to CommonJS when not set. When a file is considered an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found