Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.

Error: resolve-url-loader: CSS error with arbitrary value support #109

Closed
robylosa94 opened this issue Mar 18, 2021 · 6 comments
Closed
Labels
bug Something isn't working

Comments

@robylosa94
Copy link

robylosa94 commented Mar 18, 2021

What version of @tailwindcss/jit are you using?

v0.1.3

What version of Node.js are you using?

v.12.20.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

https://github.com/robylosa94/tailwindjit-issue.git

I'm using the arbitrary value support functionality like this:

Schermata 2021-03-18 alle 14 56 05

In development everything is alright, but on build goes wrong the resolve-url-loader package:

Schermata 2021-03-18 alle 14 58 17

I'm using webpack 4 and sass.

Thanks for the support!

@adamwathan
Copy link
Member

Hey! Please provide a reproduction as requested — the reproduction field is required because it makes it a lot easier to troubleshoot stuff if we can just clone it down vs. creating it all from scratch.

@robylosa94
Copy link
Author

@adamwathan Sorry, I have updated the request!

@robylosa94 robylosa94 reopened this Mar 18, 2021
@valse
Copy link

valse commented Mar 20, 2021

Hi, I have the same issue on the last 0.1.5 version too

@adamwathan
Copy link
Member

Can you test this on v0.1.7 and see if it fixes your issue? Thanks!

@valse
Copy link

valse commented Mar 23, 2021

Can you test this on v0.1.7 and see if it fixes your issue? Thanks!

I tested it with the v0.1.7 but I have the same build error, thank you for your help!

@adamwathan adamwathan added the bug Something isn't working label Mar 27, 2021
@adamwathan
Copy link
Member

This is a tricky one to nail down but in my testing this only happens with Sass, and is not an issue if you are writing (Post)CSS. I took the reproduction repository and converted Grid.module.scss to Grid.module.css and refactored any Sass-specific syntax (like removing nesting) and the error went away.

Unfortunately I don't expect there is anything we can do on our side to fix this since it seems to be something to do with Sass specifically, so going to have to close without taking any action on it and recommend either not using Sass (I personally would recommend this, it's not worth the extra complexity/build slow down), or just writing regular CSS for these situations:

  .root {
-   @apply top-[30%];
+   top: 30%;
  }

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants