Importing .less file using import results in error

[MulesGaming]

Astro Info

> [email protected] 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.

[bluwy]

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.

[MulesGaming]

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