Mark import as external

[edoardocavazza]

I am trying to mark some @import as external, in order to preserve them in the final bundle, but I was unable to find the correct configuration. Is it something that can be achieved today? Otherwise, would you consider to add this feature?

As usual, thanks for your great work.

[JoshuaWise]

I need this feature as well.

[gorlanova]

I came here because I have the same issue, trying to import a font via a CDN and @import rule in my css won't work...

[geekox86]

I am also trying to import FontAwesome css, which works but the imported css has relative paths pointing to webfonts in the libray's directory under node_modules that stop being served by Vite. In PostCSS setup, these used to work because they get rewritten as absolute paths, and they are included in the final build while the paths are flattened out under the final bin directory.

@import url("@fortawesome/fontawesome-pro/css/all.css");

[jossmac]

I tried to do this with bundleAsync() custom resolver but it seems to be ignored/omitted 😕

let { code } = await bundleAsync({
  resolver: {
    read(filePath) {
      if (filePath.startsWith("http")) {
        return `@import url("${filePath}");`;
        // NOTE: returning any other CSS works as expected e.g.
        // return `body { background: red; }`;
      }
      return fs.readFileSync(filePath, "utf8");
    },
    resolve(specifier, from) {
      if (specifier.startsWith("http")) {
        return specifier;
      }
      return path.resolve(path.dirname(from), specifier);
    },
  },
});

I ended up reverting to bundle() and just prepended the external imports 🤷‍♂️

function writeWithFonts(outputPath, code) {
  const fonts = `@import url("https://fonts.googleapis.com/css?family=Font+One");
@import url("https://fonts.googleapis.com/css2?family=Font+Two");`;

  return fs.writeFileSync(outputPath, `${fonts}\n\n${code}`, "utf8");
}

It'd be great if there was an alternative approach; I'd much prefer to maintain the input CSS as the source of truth.