SASS is deprecating `@import`

[stefanv]

See https://sass-lang.com/documentation/breaking-changes/import/ and executablebooks/sphinx-design#231

Bootstrap issue (they're aiming for v6)

I think what we want in our index.scss is to do:

@use "sections/skip-link" as *;

For all modules we expose to users, but, interally, to use:

@use "~bootstrap/scss/bootstrap" as *;

for modules we don't export, and then access those using the bootstrap. namespace.

[drammock]

They have an automated migration tool. I just tried it like this:

$ sass-migrator module --migrate-deps src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss node_modules/bootstrap/scss/_functions.scss

adding bootstrap's _functions.scss as an additional entrypoint was required to get the tool to run. It changed 36 files. Example: in _accessibility.scss it adds @use "../variables/color" as variables-color; to the top, and then things like

$target-color-contrast-dark: $foundation-black,

change to

$target-color-contrast-dark: variables-color.$foundation-black,

Might be a good starting point but I'm not savvy enough to know off the top of my head if this will work before BS6 or if we have to wait for BS6 before we can change our code.

[stefanv]

I ran the migration tool, and I don't think it does what you want as a package author. It is useful for end user projects, because it changes imports to using namespaces—fewer chances of conflicts.

But, as a style library you only use @import to bring definitions into a single namespace, that the user then imports. So, my recommendation is what was posted above.

[stefanv]

Looks like @forward is very similar to @use ... as *, but there are subtle namespace differences that I have to figure out.