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

Importing .less file using import results in error #11811

Closed
1 task
MulesGaming opened this issue Aug 21, 2024 · 2 comments
Closed
1 task

Importing .less file using import results in error #11811

MulesGaming opened this issue Aug 21, 2024 · 2 comments
Labels
needs triage Issue needs to be triaged

Comments

@MulesGaming
Copy link

Astro Info

> src@0.0.1 astro
> astro info

Astro                    v4.13.3
Node                     v22.3.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When importing a less css file in src and loading it with <link rel="stylesheet/less" type="text/css" href={baseStyles} /> you encounter a error when building. It works as expected in the dev server.

Error:

14:49:46 [ERROR] [vite] x Build failed in 340ms
src/layouts/Base-layout.astro (4:7): "default" is not exported by "src/styles/base.less", imported by "src/layouts/Base-layout.astro".
file: /home/mulesgaming/Documents/projects/new-website/src/layouts/Base-layout.astro:4:7

2: const currentURL = Astro.url
3: const { title, desc, icon } = Astro.props;
4: import baseStyles from '../styles/base.less'
          ^
5: ---

  Stack trace:
    at getRollupError (file:///home/mulesgaming/Documents/projects/new-website/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
    at Module.error (file:///home/mulesgaming/Documents/projects/new-website/node_modules/rollup/dist/es/shared/node-entry.js:13958:16)
    at ModuleScope.findVariable (file:///home/mulesgaming/Documents/projects/new-website/node_modules/rollup/dist/es/shared/node-entry.js:12110:39)
    at FunctionBodyScope.findVariable (file:///home/mulesgaming/Documents/projects/new-website/node_modules/rollup/dist/es/shared/node-entry.js:7465:38)
    at CallExpression.bind (file:///home/mulesgaming/Documents/projects/new-website/node_modules/rollup/dist/es/shared/node-entry.js:4804:28)

What's the expected result?

For it to build without a error.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wuwehp?file=src%2Fpages%2Findex.astro

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Aug 21, 2024
@bluwy
Copy link
Member

bluwy commented Aug 22, 2024

You should import '../styles/base.less' without importing anything from it. That will apply the styles to the page by default. If you want to get the url, you should use '../styles/base.less?url' so you can pass it to the href. If you want to get the CSS content, you should use '../styles/base.less?inline'.

It seems like a Vite bug to me that it allows you to default import the CSS in SSR dev since we have disallowed that in the last major: https://vitejs.dev/guide/migration.html#removed-deprecated-apis. I'll investigate this upstream.

@bluwy bluwy closed this as not planned Won't fix, can't repro, duplicate, stale Aug 22, 2024
@MulesGaming
Copy link
Author

I'm stupid, thank you. Shouldn't there be some sort of error with the dev server though?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage Issue needs to be triaged
Projects
None yet
Development

No branches or pull requests

2 participants