Error resolve url loader css error



Error: Resolve-Url-Loader : CSS error

The famous Resolve Url Loader, a weird issue that I ran into while trying to run a react project for the first time on my newly installed development environment. If you are curious about all these details, you may refer to this article to read about the circumstances in which I ran into this error.

Of course, such errors would push you to start thorough and deep research on the web to know about the why and when and more importantly, the HOW solve it. I already did that, and after trying most of the suggestions, although they worked for some developers, they didn’t work in my case. The way I resolved this issue in my project was pretty unique, and that’s why I chose to share it in my blog.

I am glad you are here and I hope you find this content useful. Without further ado, let’s get to the solution!

since I was trying to run an existing project that I just clone from Github, I ran all the required commands such as :

  • Yarn install
  • Yarn upgrade
  • yarn add react-scripts
  • Yarn Build
  • Yarn start

Once I started the project this issue showed up every time, no matter what fixes I tried, so I went back to read the files line by line. Going through the Package.json file, I remarked that some of the packages weren’t upgraded, specifically the react-scripts package. It’s a set of scripts provided by the create-react-app starter pack, which enables launching React apps without much configuration. This capability comes in the form of multiple features, that include the auto prefixed CSS. And if you read the error details carefully, you will see that the issue is revealed on one of the CSS files. Of course, as part of the error investigation, I changed the CSS files links, I uninstalled, reinstalled, updated the node-sass and the resolve-URL-loader package, but to no avail.
To begin with, let’s discover the CSS Autoprefixer , what’s it, and what does it? and why is it stopping us from successfully building our newly created/cloned project?

What’s CSS AutoPrefixer?

It is a CSS post-processor that parses the compiled CSS files checking it against caniuse service to manage the prefixes related to each vendor.

What’s the Autoprefixer role?

It solves the problem we encounter with vendor prefixes that we have to apply to the CSS rules to make some options styles available for a larger variety of users on different browsers.
If that seems like a hard explanation, here it is short and clear: Autoprefixer is taking care of your CSS code, which prevents you from remeberance/add/remove/ check of vendor prefixes.

what’s the issue with the Autoprefixer?

when starting a new React project, you will need to install a react-scripts package, which includes the resolve-URL-loader package, the latter role includes management and redirection of the CSS files. connecting the dots, we may understand that the management operation of the CSS files includes the auto prefixing service. Previous versions of the resolve-URL-loader package used to make use of the Rework CSS parser, but as it’s not adapted to manage the modern CSS versions, the package of interest adopted the PostCSS parser by default. Long story short, the subject issue was the result of the bad configuration and management of CSS files caused by the Resolve-Url-Loader, itself included in the react-scripts package. Since my development environment was newly installed. I was using the latest version of yarn and upgrading all the packages, which caused the issue.

Читайте также:  Dism restorehealth error 0x800f081f

How I resolved the situation?

Reading the Package.Json file with a fine-tooth comb, I figured out that I was not using the same react-scripts that my team was using on the subject project. Uninstalling the existing react-scripts package and installing the right one served me well.

So here comes the end of my issues with the frontend project, that I built and start successfully. A sigh of satisfaction was about to rise from the bottom of my heart, but it didn’t, because the Backend project developed using C#, which was running flawlessly, was launching a new message error, that took almost two days to find a fix, and the solution, was not more common than the one described in this article.

Thank you for reading so far, and if you are willing to learn about the next bug with the .Net project, just click on the next article.

Источник

[react-scripts 3.4.0] SCSS file with import statement cause resolve-url-loader: CSS error #8596

Comments

Describe the bug

After upgrading from react-scripts 3.2.0 to 3.4.0 in a project which imports a simple SCSS file with an @import statement, running yarn build consistently fails with:

Steps to reproduce

Here’s a very simple repro created by:

  • npx create-react-app
  • yarn add node-sass
  • create a index.scss file containing @import url(«https://fonts.googleapis.com/css?family=Open+Sans»);
  • import index.scss from App.js

Links

  • Repro url: https://github.com/simoneb/cra-3.4.0-sass-repro
  • CircleCI build showing the build error: https://app.circleci.com/jobs/github/simoneb/cra-3.4.0-sass-repro/1

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

I’m getting a similar error when using url() .

react-scripts version: 3.3

I’m getting a similar error but with css . I rename index.css to style.css and build again, error is gone.

Hmm, strange. I changed this

to this (without quotes)

I think this is a issue on loaders above resolve-url-loader which is sass-loader which uses node-sass which uses libsass

We just need removeCR option to be added.

Saving SCSS files with LF new lines mode helps, but it is only temporary solution :C

Dear developers, please solve this issue, it really interfere.

@NSarg7 Dear developer can you please help fix this issue? 🙂
It seems this is not a CRA issue.

@NSarg7 Dear developer can you please help fix this issue? 🙂
It seems this is not a CRA issue.

I don’t know exactly where is problem, but problem solves when in «resolve-url-loader/index.js» file to change option from ‘removeCR : false,’ to ‘removeCR : true,’.

but problem solves when in «resolve-url-loader/index.js» file to change option from ‘removeCR : false,’ to ‘removeCR : true,’.

Tried, but does not work. Maybe you changed something else?

Error: resolve-url-loader: CSS error
source-map information is not available at url() declaration (found orphan CR, try removeCR option)

Читайте также:  Apache error log configuration failed

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I am getting this error? Why is that?

to this (without quotes)

I tried this. But doesn’t work

Having the same problem on «react-scripts»: «^3.4.1», «node-sass»: «^4.14.0».

«./src/index.scss
Error: resolve-url-loader: CSS error
source-map information is not available at url() declaration (found orphan CR, try removeCR option).»

You could try converting your line-endings to LF from CLRF.

Not sure if removeCR: true has any negative side effects or if it should be added (or if it helps with this at all)

You could try converting your line-endings to LF from CLRF.

This ended up being the solution after all — thanks! I tried this at first by changing the line endings setting in VS Code preferences, but that did not help. I actually had to open each .scss-file individually, change the line-ending setting for the file and then save the file again.

Источник

resolve url loader can not operate: css error #28

Comments

my webpack config

Got this since I use something called react-virtualized in my component. It works well before I use react-virtualized though.

Here is some code inside Home.js component

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

Same thing for me. But the error is on @font-face :

The file in question:

Found the problem. If you use css-modules , the insides of @font-face declaration are wrapped in :global :

So rework fails on it.

Is there a way to work around it?

@bholloway I tried to, by strangely it doesn’t work without it either. css-loader can’t resolve the path with

in CSSModules mode.

@le0nik That’s strange. Why would it not like the tilde?

I am not sure resolve-url-loader will help matters, since none of your paths are relative to imported CSS files. And the paths constructed with expressions will not resolve the way you expect.

Establish it is indeed a problem with tilde. If that is the case then try omit-tilde-webpack-plugin.

I got it to work. I had to mention, that I was using webpack@2.10-beta.20 . omit-tilde-webpack-plugin doesn’t work with it.

So here’s how I got it to work:

example.scss (uses css-modules):

The mixin itself is in the comment above.

I have absolutely no idea why this works, but it does. This kind of magic worries me :/, but at least I got it to work.

@le0nik In scss and css all paths are considered relative. The tilde is a Webpack convention to indicate a module (which is not relative).

I am assuming that globals is not a subdirectory next to example.scss . But that gobals is somehow resolvable using resolve.root or resolve.fallback . In this case example.scss is absolutely correct for Webpack and not magic at all.

@craigcosmo does this relate to your problem?

Sorry @le0nik I did not re-read the history of the conversation before making my last post and it simplistically ignores the crux of the issue.

I can’t think why this would work like this. I am assuming that assets is not a directory within globals (?).

Читайте также:  File save permission error

Источник

resolve-url-loader cannot operate: CSS error with commented line in css file #77

Comments

I raised this issue on stack overflow ( https://stackoverflow.com/questions/48608703/vue-js-webpack-error-importing-css-file-from-external-library/48617366#48617366 )

Building a vue.js app w webpack, and using resolve-url-loader for external css library loading ( aos css animation library ) , I got an error when building my app.

I discover that the the aos.css file has a comented last lien at the end

Withi this line in the aos.css code , I get an error compilation phase

If I suppress this line, then compilation is OK

I asked michalsnik why this commented line is still in the aos.css file , but I don’t understand why the resolve-url-loader take it in account , it’s a commented line after all..

thanks for clarifying this issue .

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

@Erwin16 this line is referencing a source-map on the file system. Certainly some source-map is necessary for `resolve-url-loader to do its thing.

Usually the resolve-url-loader is not the first loader in the chain. The source-map comes through the webpack internals and not specified in the file source-map comment.

From the error though, it seems like (under the hood) rework can also load the source-map from the source file when it parses it. It seems that the file is simply not present in the dist directory.

Источник

resolve-url-loader cannot operate: CSS error when using @apply #48

Comments

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:

When I remove @apply the build process completes without error.

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

The same error occurs if I use @responsive .

If I put the @apply and @responsive code in a .css file and import into the SCSS file then I don’t get the error anymore.

I spoke too soon, putting the code in an external .css works for @responsive but @apply throws an error saying the class doesn’t exist.

Hey @thestepafter! This is unfortunately a known issue with resolve-url-loader due to one of its dependencies falling over with CSS it doesn’t understand, even if it’s parseable:

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:

Disable CSS url() rewrites in Mix which will disable that plugin:

This will disable that feature of course as well which is a bit of a bummer, but personally I’ve never even used it.

Use the .standaloneSass option (also aliased as .fastSass ) instead of the normal .sass compilation. This disables all fancy Webpack Sass features and just processes your Sass files in the most boring way possible:

This will also bypass that plugin, as well as a bunch of other stuff that you might not need. Your stuff will compile way faster too 👍

EDIT: Scratch option two, it doesn’t run your CSS through PostCSS at all when compiling Sass that way. Stick with option 1!

Источник

Оцените статью
toolgir.ru
Adblock
detector