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

Resolve CSS import URLs #389

FredKSchott opened this issue May 30, 2020 · 12 comments · Fixed by #803

Resolve CSS import URLs #389

FredKSchott opened this issue May 30, 2020 · 12 comments · Fixed by #803


Copy link

FredKSchott commented May 30, 2020

Original Discussion:
/cc @idan, @jan-dh, @FredKSchott, @jwondrusch, @nickolay

Right now, we only resolve import URLs in JS. We should use that same logic on CSS import URLs as well.

// Supported (In any JS file)
import 'antd/dist/antd.css';

// Not Supported (In CSS files)
@import 'antd/dist/antd.css';

To start, we're going to try to implement this without Webpack's ~ operator. That means that Snowpack will never handle @import 'foo/bar.css' as a relative URL, even though the browser would. Relative URLs must be imported via @import './foo/bar.css'.

Copy link

jan-dh commented May 30, 2020

As @nikolay pointed out, @importis part of the css spec, so no extra plugin needed. The postcss-import plugin 's purpose is mostly this:

One of the most useful features preprocessors offer is the ability to organize your CSS into multiple files and combine them at build time by processing @import statements in advance, instead of in the browser.

I think the docs you updated here are a bit off.

There's a pretty good section on using with preprocessors in the Tailwindcss docs

nickolay added a commit to nickolay/snowpack that referenced this issue May 30, 2020
Copy link

nickolay commented May 31, 2020

In my PR for the documentation I tried to explain what's lacking in snowpack at the moment: @import 'foo.css' will only try to import foo.css in public/. Expected functionality includes:

  • Importing CSS files relative to the current file (@import './foo.css')
  • Importing styles from other installed packages (@import 'antd/dist/antd.css'; should import the file in node_modules/antd/dist/antd.css)

Copy link

To piggyback on @jan-dh's comment, while I had been figuring out the issue with TailwindCSS and the pseudo-selector classes using @apply, I had tried using postcss-import.

It didn't solve the issue, but it did work in terms of being able to define root or path in the postcss plugin settings and have the files be read correctly.

I haven't dug into the snowpack source too much to know whether it's a more prudent path to add a setting to snowpack to indicate a root for css @imports or to update the docs. If it's the latter, I could probably put together a quick PR for that.

FredKSchott pushed a commit that referenced this issue May 31, 2020
* remove trailing spaces from the docs

* update CSS @import docs

Related to #389
Copy link
Owner Author

Another example that should be fixed as a part of this, if possible (or broken out):

@font-face {
  font-family: 'Framework7 Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Framework7Icons-Regular.eot");
  src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
       url("../fonts/Framework7Icons-Regular.woff") format("woff"),
       url("../fonts/Framework7Icons-Regular.ttf") format("truetype");


Copy link
Owner Author

docs have been updated, so I think we're safe to close

Copy link

The docs currently point to this issue, so it definitely shouldn't be closed!

Webpack automatically parses CSS @imports and bundles them together. Since the documentation currently points to this issue as "not yet supported natively", it seems the plan is for snowpack to also do something similar.

Copy link
Owner Author

Ah, thank you! My issue cleanup was over ambitious :)

We could probably clarify the docs a bit more, but for anyone coming here the current status is:

  • Snowpack supports @import statements today, so as long as your browser supports them
  • but, unlike other import statements it's resolved purely by URL in the browser, and not by local file path at build time
  • If you want to resolve imports at build time, use postcss (see the docs linked above)
  • Webpack automatically parses and bundles these together today

Copy link
Owner Author

FredKSchott commented Aug 14, 2020

Update: Cleaned up the docs to make it more clear that Snowpack matches native CSS import syntax by default and that imports by package name are supported via a PostCSS plugin.

We also have a PR to add native support for this here: #803

Copy link

Are there any working examples of how precisely to set this up. I read that snowpack won't import from node_modules and that people have tried postcss-import without success (my case too)?

Copy link

Same. I have no idea what any of this means... I just want to import my fonts for my project T_T

Copy link

I've found this to work

// src/components/Foo.jsx
import './Foo-style.css';
// in src/components/Foo-style.css
.is-bar {
  background-image: url('/_dist_/components/Foo/img/bar.svg');

But... that seems not ideal. I'd expect to be able to do:

// in src/components/Foo-style.css
.is-bar {
  background-image: url('./img/bar.svg');

Copy link

tanepiper commented Feb 4, 2021

Creating a clean repo using @snowpack/app-template-svelte-typescript I have a similar issue.

In my App.svelte I can do this fine inside the <script> section and it works

import 'xp.css/dist/XP.css';

If I try it as an @import inside my main sass file:

@import "~xp.css/dist/XP.css" can't be resolved

If I do @import "node_modules/xp.css/dist/XP.css" to loads, but it fails to find references such as fonts (which sounds like the same issue @ludwignagelhus is having?)

And @techieshark's suggestion doesn't work for third-party CSS :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging a pull request may close this issue.

9 participants