-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
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
rebaseUrls runs before Sass variables are resolved #19196
Labels
Comments
sapphi-red
added
feat: css
p3-minor-bug
An edge case that only affects very specific usage (priority)
labels
Jan 14, 2025
DavidBiddle
added a commit
to alphagov/forms-admin
that referenced
this issue
Jan 15, 2025
There's [a bug in the way Vite's inbuilt sass importing works](vitejs/vite#19196) that means some of our assets don't build properly if we import the govuk-frontend styles using the @GOVUK alias. We can get around this by using Sass's builtin NodePackageImporter to import the govuk-frontend styles. This bypasses the Vite import code that causes the issue. It's also better for a couple of other reasons. It makes it clear that this import is coming from an npm package (which was obscured slightly when we were using the alias). It also makes us resilient to structure changes in the govuk-frontend package (NodePackageImporter uses the 'sass' field in govuk-frontend's package.json to determine the file to import, so we no longer need to point to a specific file which could change).
DavidBiddle
added a commit
to alphagov/forms-runner
that referenced
this issue
Jan 15, 2025
There's [a bug in the way Vite's inbuilt sass importing works](vitejs/vite#19196) that means some of our assets don't build properly if we import the govuk-frontend styles using the @GOVUK alias. We can get around this by using Sass's builtin NodePackageImporter to import the govuk-frontend styles. This bypasses the Vite import code that causes the issue. It's also better for a couple of other reasons. It makes it clear that this import is coming from an npm package (which was obscured slightly when we were using the alias). It also makes us resilient to structure changes in the govuk-frontend package (NodePackageImporter uses the 'sass' field in govuk-frontend's package.json to determine the file to import, so we no longer need to point to a specific file which could change).
DavidBiddle
added a commit
to alphagov/forms-admin
that referenced
this issue
Jan 15, 2025
There's [a bug in the way Vite's inbuilt sass importing works](vitejs/vite#19196) that means some of our assets don't build properly if we import the govuk-frontend styles using the @GOVUK alias. We can get around this by using Sass's builtin NodePackageImporter to import the govuk-frontend styles. This bypasses the Vite import code that causes the issue. It's also better for a couple of other reasons. It makes it clear that this import is coming from an npm package (which was obscured slightly when we were using the alias). It also makes us resilient to structure changes in the govuk-frontend package (NodePackageImporter uses the 'sass' field in govuk-frontend's package.json to determine the file to import, so we no longer need to point to a specific file which could change).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
Describe the bug
I'm importing sass from a package (govuk-frontend) which has a mixin to generate asset URLs.
When using the modern Sass API with Vite, and using an alias in the import path, I find that the assets don't build and I get an error message
$govuk-fonts-path + $filename referenced in $govuk-fonts-path + $filename didn't resolve at build time, it will remain unchanged to be resolved at runtime
.When debugging, I can see that the rebaseUrls function is converting the
url($govuk-fonts-path + $filename)
from the mixin intourl("$govuk-fonts-path + $filename")
. This is unexpected, because the variables should be replaced with their values before the rebaseUrls function wraps them in quotes.This doesn't happen if the package is imported using another importer:
NodePackageImporter
and thepkg:
syntaxnode_modules/govuk-frontend/dist/govuk/all
) which I think must use Sass's builtin FileImporterIt alsl doesn't happen when using the legacy Sass API. This suggests to me that there's something different happening in
makeModernScssWorker
’sinternalImporter
that causes rebaseUrls to be run before the sass variables have been resolved.Reproduction
https://github.com/DavidBiddle/vite-issue-test
Steps to reproduce
Run
npm install
andnpx vite build
Check response for
didn't resolve at build time, it will remain unchanged to be resolved at runtime
messageSystem Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: