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-url-loader cannot operate: CSS error when using @apply #48
Comments
The same error occurs if I use |
If I put the |
I spoke too soon, putting the code in an external .css works for |
Hey @thestepafter! This is unfortunately a known issue with bholloway/resolve-url-loader#28 It looks like there are plans to remove the dependency that is causing that issue, but in the mean time, there's two options for working around it:
EDIT: Scratch option two, it doesn't run your CSS through PostCSS at all when compiling Sass that way. Stick with option 1! Let me know if that solves your issue! |
Awesome, thank you so much for prompt reply Adam! I added |
While option 1 worked great, option 2 simply copied over the import statement from the sass file into the css, vs actually doing anything with it. |
@scottzirkel What does your import look like? This may not be your problem but worth mentioning in case it is; Sass won't process CSS imports, only Sass imports. For example, Sass will not actually inline this import because it's a CSS file and @import "path/to/some/styles.css"; You can get around that by leaving off the @import "path/to/some/styles"; If that's not your problem though then that's an annoying issue for sure 🤔 |
Oh, i mean the |
@scottzirkel ah you're totally right! |
You know, if you write tests before you code it really helps. 😉 |
I've heard this is a good idea! 😄 |
How might one resolve this outside of Laravel? I'm in Rails and hitting the same warning. |
@macmartine What's your build setup look like? Are you using the new Rails Webpacker thing? |
@adamwathan Yes, exactly, the webpacker gem. I followed the steps described by @jasoncharnes here: tailwindlabs/discuss#4 |
Unfortunately looking through the commit history there it looks like this is hard-coded into Webpacker and can't be disabled the same way: https://github.com/rails/webpacker/blob/master/package/rules/css.js#L24 I'm not sure if Webpacker lets you add custom loaders or tweak these options after the fact in anyway 🤔 |
Similar issue using Symfony Encore (webpack). https://github.com/symfony/webpack-encore. I'll see if I can debug the issue. |
For Webpack Encore this can be resolved by setting resolveUrlLoader to false in the enableSassLoader call
|
@leevigraham thank you, that's what i was looking for ! Except for me it's resolve_url_loader and not resolveUrlLoader that works. Thanx again :) |
@macmartine did you ever get this to work inside of Rails without throwing this warning? It was still compiling for me, so I didn't think it'd be that big of an issue, but it appears Heroku is rejecting the build because of it. |
If any other Rails people find this, I was able to resolve it, see here: rails/webpacker#1570 |
I was able to resolve this error by upgrading to version 3 of resolve-url-loader. |
You are life-saver! :) It solves everything about this error. I had 2nd version because of Laravel 5.8 initial |
Add new Laravel JS structure to the PurgeCSS docs
Just wanted to check if there was any update on this? I am using resolve-url-loader v3.1.0 and the issue still exists in that version. |
I was able to resolve this error by upgrading to version top: "resolve-url-loader": "^3.1.1" |
it does not help. in v2 it shows a warning and at least build succeeds. in v3 it fails completely with an error on the build.
I also cannot upgrade "sass-loader": "^8.0.2" , have to stick with 7.1 because of this issue any ideas? |
I put the following in my
.scss
file:and after running webpack I can use the classes but I get the following error at the end of the build process:
WARNING in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[{"version":"6.0.13","plugins":[null,null,null,null,null,null,null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.13"},null,null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","includePaths":["./node_modules/foundation-sites/scss/","./node_modules/font-awesome/scss/","./node_modules/motion-ui/","./node_modules/video.js/src/css/"],"sourceMap":true}!./sass/styles.scss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/sass/styles.scss:6698:3: missing '}'
at error (/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules/css/lib/parse/index.js:62:15)
@ ./sass/styles.scss 4:14-245
@ multi ./node_modules/jquery/dist/jquery.min.js ./node_modules/what-input/dist/what-input.min.js ./node_modules/foundation-sites/dist/js/foundation.min.js ./node_modules/motion-ui/motion-ui.js ./node_modules/video.js/dist/video.min.js ./sass/styles.scss
When I remove
@apply
the build process completes without error.The text was updated successfully, but these errors were encountered: