Skip to content
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

Sass-Migrator tool fails when node_modules Bootstrap file is imported #215

Closed
coltanium13 opened this issue Nov 24, 2021 · 1 comment
Closed

Comments

@coltanium13
Copy link

coltanium13 commented Nov 24, 2021

Several issues:
similar to this other #127

my main indes.scss file, which has all the third party libraries (like boostrap v5) and my own overrides

// Third-party styles
@import "~bootstrap/scss/_functions";
@import "~bootstrap/scss/_variables";
@import "bootstrap-override/_variables";
@import "~bootstrap/scss/bootstrap";

// Core
@import "~core/styles/_variables";
@import "_variables";
@import "_elements";
@import "~core/styles/_print";
@import "_utilities";
@import "_aspect-ratio";

// Shared Bootstrap Overrides
@import "~core/styles/bootstrap-override/_forms";
@import "~core/styles/bootstrap-override/_modal";
@import "~core/styles/bootstrap-override/utilities/_flex";
@import "~core/styles/bootstrap-override/utilities/_spacing";
@import "~core/styles/bootstrap-override/_card";

// Third-party overrides
@import "bootstrap-override/_badge";
@import "bootstrap-override/_buttons";
@import "bootstrap-override/_card";
  1. base case when i try to run the following command , it throws this error
PS C:\Users\coltong\source\repos\Ovations_v2\frontend\platform\src\styles> sass-migrator --migrate-deps module index.scss
Error: The migrator wants to rename a member in ..\..\..\node_modules\bootstrap\scss\_functions.scss, but it is not being migrated. You should re-run the migrator with --migrate-deps or with ..\..\..\node_modules\bootstrap\scss\_functions.scss as one of your entrypoints.
Migration failed!

not sure why it cant find the bootstrap _functions.scss file, or why it really needs to migrate a third party file. it will get overwritten every time i pull packages from npm anyways

  1. if i migrate one of my own custom override files, it works, but only adds the new map commands, but does not add the 'with clause' conversions for bootstrap overrides. the following is the file for after i ran the migrator. (it has no with clause in the overrides)
// my custom _variables.scss file
@use "sass:map";
$theme-colors: (
  hiviz: #ff9900,
  light: $gray-300,
);

$sizes: map.merge($sizes, (
  0: 0%,
));

$tooltip-bg: $gray-800;  --> no with clause stuff here??
$tooltip-arrow-color: $gray-800;
$enable-validation-icons: false;

I am not sure why this is tool is not working at all in my case? are others having issues when using bootstrap v5 in their sass files?

@jathak
Copy link
Member

jathak commented Dec 2, 2021

The migrator does not work well when you are depending on unmigrated code that won't be migrated itself (e.g. third party code that's outside of your control). Bootstrap in particular does a lot of things with @import that makes it difficult to migrate code that depends on it.

If you use a single entrypoint for all of your Bootstrap imports and then migrate the rest of your code, but not that entrypoint, you should be able to get the migrator to work, but you may be better off waiting for Bootstrap itself to migrate (see twbs/bootstrap#29853)

@jathak jathak closed this as completed Dec 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants