Unable to import mounted CSS into SCSS. #10592

razonyang · 2022-12-31T06:22:10Z

Hi, Hugo seems doesn't able to load mounted CSS file into SCSS, but normal CSS files are OK.

What version of Hugo are you using (`hugo version`)?

$ hugo version
hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended linux/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio

Does this issue reproduce with the latest release?

Yep.

Log

Template changed WRITE         "/home/razonyang/Projects/razonyang/hugo-lab/layouts/index.html"
WARN 2022/12/31 14:13:30 tingle.js/tingle.css
WARN 2022/12/31 14:13:30 tingle.js/tingle.js
ERROR 2022/12/31 14:13:30 Rebuild failed: TOCSS-DART: failed to transform "main.scss" (text/x-scss): "/home/razonyang/Projects/razonyang/hugo-lab/assets/main.scss:2:8": Can't find stylesheet to import.

Reproduce steps

// config.toml
[[module.imports]]
path = "github.com/robinparisi/tingle"

[[module.imports.mounts]]
source = "src"
target = "assets/tingle.js"

// layouts/index.html
<html>
    <head>
        {{- range resources.Match "tingle.js/*" }}
          {{- warnf "%v" .Name }}
        {{- end }}
        {{ $css := resources.Get "main.scss" }}
        {{ $css = $css | toCSS (dict "includePaths" (slice "node_modules") "transpiler" "dartsass") }}
        <link href="{{ $css.RelPermalink }}" rel="stylesheet">
    </head>
    <body>
        <h1 class="text-red">RED HEADING</h1>
    </body>
</html>

// assets/main.scss
@import "foo/bar";
@import "tingle.js/tingle"; # Comment this line works as expected.

// assets/foo/bar.css
.text-red {
    color: red;
}

Full example located at https://github.com/razonyang/hugo-lab/tree/scss-import-css. cd exampleSite && hugo server.

Both libsass and dartsass are not working.

The text was updated successfully, but these errors were encountered:

pamubay · 2022-12-31T12:09:56Z

your module imports contains remapped path, try using module.imports instead of theme in your config file:

-- theme = 'github.com/razonyang/hugo-lab'
++ [[module.imports]]
++  path = "github.com/razonyang/hugo-lab"

https://github.com/razonyang/hugo-lab/blob/scss-import-css/exampleSite/config.toml#L4

razonyang · 2022-12-31T12:53:26Z

your module imports contains remapped path, try using module.imports instead of theme in your config file:

Thanks, but doesn't help, same error reached.

I think the theme has the same effect as module.imports, see https://gohugo.io/hugo-modules/theme-components/

pamubay · 2022-12-31T15:25:28Z

turns out, if we explicitly write the full path with the extension, it does resolves correctly.

@import "foo/bar";
@import "tingle.js/tingle.css";

razonyang · 2022-12-31T15:33:13Z

@pamubay Thanks, I've tried this before, but SASS just replace it with @import "tingle.js/tingle.css"; (loaded as an external style file) instead of importing/appending the CSS content, you'll still get 404 NOT FOUND of that CSS file, which is unexpected.

What I wish is that append the CSS content like @import "foo/bar" does.

bep · 2022-12-31T15:54:27Z

From the top of my head:

libsass does not support ordinary CSS imports at all (there is a many year old bug about it)
For import resolution with /assets, the logic is fairly simple, see https://github.com/gohugoio/hugo/blob/master/resources/resource_transformers/tocss/dartsass/transform.go#L163

jmooring · 2022-12-31T18:16:25Z

This works:

config.toml

[[module.imports.mounts]]
source = "src/tingle.css"
target = "assets/tingle.js/tingle.scss" # mount with scss extension

main.scss

@import "foo/bar";
@import "tingle.js/tingle";

jmooring · 2022-12-31T19:13:51Z

See:

If the import URL ends with .css, Sass will compile to a plain CSS import.

If it does not end with .css it should imported just like a Sass file.

I think we need to change the import resolver.

Applicable to Dart Sass only: - Sass imports with the .css extension indicate a plain CSS @import. - Sass imports without the .css extension are imported at compile time. Fixes gohugoio#10592

jmooring · 2023-01-05T20:17:37Z

@razonyang

In your initial comment, you wrote:

// assets/main.scss
@import "foo/bar";
@import "tingle.js/tingle"; # Comment this line works as expected.

Did you mean this instead?

// assets/main.scss
@import "foo/bar";  # Comment this line works as expected.
@import "tingle.js/tingle";

razonyang · 2023-01-06T02:08:16Z

@jmooring I am not good at English, I mean as same as your previous comment pointed out.

// assets/main.scss
@import "foo/bar";  # The nomarl CSS file "foo/bar.css" can be loaded by SASS.
@import "tingle.js/tingle"; # The CSS file "tingle.js/tingle.css" mounted from module are unable to load, but it should.

Applicable to Dart Sass only: - Sass imports with the .css extension indicate a plain CSS @import. - Sass imports without the .css extension are imported at compile time. Fixes gohugoio#10592

Applicable to Dart Sass only: - Sass imports with the .css extension indicate a plain CSS @import. - Sass imports without the .css extension are imported at compile time. Fixes #10592

bep · 2023-02-24T14:52:35Z

I merged 2662faf which improves the situation, but I'm not sure it totally solves it, so I'll reopen this for now.

As I understand it:

css imports with extension should be left for the browser to handle.
2662faf makes it so the imports are kept, but you still need to make sure to publish the CSS file so it's available to the browser, which isn't very optimal.

jmooring · 2023-02-24T20:09:44Z

2662faf makes it so the imports are kept

To clarify, CSS imports with a ".css" extension (@import "https://example.org/style.css") have always been kept. Dart Sass sees the extension and says to itself, "This is somebody else's problem, so I'll just include the line as is, putting it at the top of the compiled file."

2662faf has no effect on import statements where the provided path includes an extension. But if an import statement without an extension can be resolved to a file with the ".css" extension in a mounted directory, we now compile it as we should, per the Dart Sass documentation.

In my opinion, if a site author includes the ".css" extension in an import statement, it is their responsibility to make sure the file is served at the provided URL, regardless of whether file is hosted somewhere else or self-hosted.

bep · 2023-02-25T08:22:20Z

OK, second thought, I'll close this ... again.

github-actions · 2023-03-19T02:04:23Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

razonyang added Bug NeedsTriage labels Dec 31, 2022

bep removed the NeedsTriage label Dec 31, 2022

bep added this to the v0.109.0 milestone Dec 31, 2022

jmooring mentioned this issue Jan 1, 2023

dartsass: Import CSS without extension at compile time #10593

Closed

bep modified the milestones: v0.109.0, v0.111.0 Jan 26, 2023

bep modified the milestones: v0.111.0, v0.112.0 Feb 15, 2023

jmooring mentioned this issue Feb 24, 2023

dartsass: Import CSS without extension at compile time #10749

Merged

bep closed this as completed in #10749 Feb 24, 2023

bep modified the milestones: v0.112.0, v0.111.0 Feb 24, 2023

bep reopened this Feb 24, 2023

bep modified the milestones: v0.111.0, v0.112.0 Feb 24, 2023

bep closed this as completed Feb 25, 2023

github-actions bot added the Outdated label Mar 19, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to import mounted CSS into SCSS. #10592

Unable to import mounted CSS into SCSS. #10592

razonyang commented Dec 31, 2022 •

edited

Loading

pamubay commented Dec 31, 2022

razonyang commented Dec 31, 2022

pamubay commented Dec 31, 2022

razonyang commented Dec 31, 2022 •

edited

Loading

bep commented Dec 31, 2022

jmooring commented Dec 31, 2022 •

edited

Loading

jmooring commented Dec 31, 2022 •

edited

Loading

jmooring commented Jan 5, 2023

razonyang commented Jan 6, 2023 •

edited

Loading

bep commented Feb 24, 2023

jmooring commented Feb 24, 2023

bep commented Feb 25, 2023

github-actions bot commented Mar 19, 2023

Unable to import mounted CSS into SCSS. #10592

Unable to import mounted CSS into SCSS. #10592

Comments

razonyang commented Dec 31, 2022 • edited Loading

What version of Hugo are you using (hugo version)?

Does this issue reproduce with the latest release?

Log

Reproduce steps

pamubay commented Dec 31, 2022

razonyang commented Dec 31, 2022

pamubay commented Dec 31, 2022

razonyang commented Dec 31, 2022 • edited Loading

bep commented Dec 31, 2022

jmooring commented Dec 31, 2022 • edited Loading

jmooring commented Dec 31, 2022 • edited Loading

jmooring commented Jan 5, 2023

razonyang commented Jan 6, 2023 • edited Loading

bep commented Feb 24, 2023

jmooring commented Feb 24, 2023

bep commented Feb 25, 2023

github-actions bot commented Mar 19, 2023

razonyang commented Dec 31, 2022 •

edited

Loading

What version of Hugo are you using (`hugo version`)?

razonyang commented Dec 31, 2022 •

edited

Loading

jmooring commented Dec 31, 2022 •

edited

Loading

jmooring commented Dec 31, 2022 •

edited

Loading

razonyang commented Jan 6, 2023 •

edited

Loading