[6a3a178] | 1 | # Troubleshooting
|
---|
| 2 |
|
---|
| 3 | Webpack is difficult to configure simply because it is so powerful. If you face a problem it is important to raise it in the right place.
|
---|
| 4 |
|
---|
| 5 | Possibly whatever problem you are facing is _not_ an issue with this loader, so please work this list before raising an issue.
|
---|
| 6 |
|
---|
| 7 | **Working with a framework**
|
---|
| 8 |
|
---|
| 9 | 1. Check to see if that framework is still using an older version with the `rework` engine. This will not support modern CSS and is the source of most problems. Usually there is an existing issue raised in that framework and there may be workarounds there.
|
---|
| 10 | 2. Hack the framework code in your `node_modules` to diagose the root cause.
|
---|
| 11 |
|
---|
| 12 | **Creating your own webpack config**
|
---|
| 13 |
|
---|
| 14 | 1. Do the checklist at the top of the page - do you _need_ to use this loader?
|
---|
| 15 | 2. Read and understand the detail on [how the loader works](how-it-works.md).
|
---|
| 16 | 3. Check the known-issues below.
|
---|
| 17 | 4. Use the `debug` option to see where the loader is looking for your assets.
|
---|
| 18 | 5. Temporarily remove this loader and use non-relative asset paths to check if the problem is something else.
|
---|
| 19 | 6. Check [stack overflow](http://stackoverflow.com/search?q=resolve-url-loader) for an answer.
|
---|
| 20 | 7. Review [previous issues](/issues?utf8=%E2%9C%93&q=is%3Aissue) that may be similar.
|
---|
| 21 | 8. Try to recreate the problem with a minimum breaking example project.
|
---|
| 22 |
|
---|
| 23 | I'm happy this loader helps so many people. Open-source is provided as-is and I'm currently **not** [dogfooding](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) this loader in my own work, so please try not project your frustrations. There are some really great people who follow this project who can help.
|
---|
| 24 |
|
---|
| 25 | ## Known issues
|
---|
| 26 |
|
---|
| 27 | ### Support for `image-set()`
|
---|
| 28 |
|
---|
| 29 | Right now this loader only rewrites `url()` statements.
|
---|
| 30 |
|
---|
| 31 | If you need other statements processed, such as `image-set()`, then please upvote [issue #119](issues/119).
|
---|
| 32 |
|
---|
| 33 | ### Absolute URIs
|
---|
| 34 |
|
---|
| 35 | By "absolute URIs" we more correctly mean assets with root-relative URLs or absolute file paths. These paths are **not** processed unless a `root` is specified.
|
---|
| 36 |
|
---|
| 37 | However any paths that _are_ processed will have windows back-slash converted to posix forward-slash. This can be useful since some webpack loaders can choke on windows paths. By using `root: ''` then `resolve-url-loader` effectively does nothing to absolute paths except change the windows backslash.
|
---|
| 38 |
|
---|
| 39 | **💡 Protip** In **windows** if your downstream loaders are choking on windows paths using `root: ''` can help.
|
---|
| 40 |
|
---|
| 41 | Also it be useful to process absolute URIs if you have a custom `join` function and want to process all the paths. Although this is perhaps better done with some separate `postcss` plugin.
|
---|
| 42 |
|
---|
| 43 | ### Windows line breaks
|
---|
| 44 |
|
---|
| 45 | Normal windows linebreaks are `CRLF`. But sometimes libsass will output single `CR` characters.
|
---|
| 46 |
|
---|
| 47 | This problem is specific to multiline declarations. Refer to the [libsass bug #2693](https://github.com/sass/libsass/issues/2693).
|
---|
| 48 |
|
---|
| 49 | If you have _any_ such multiline declarations preceding `url()` statements it will fail your build.
|
---|
| 50 |
|
---|
| 51 | Libsass doesn't consider these orphan `CR` to be newlines but `postcss` engine does. The result being an offset in source-map line-numbers which crashes `resolve-url-loader`.
|
---|
| 52 |
|
---|
| 53 | ```
|
---|
| 54 | Module build failed: Error: resolve-url-loader: error processing CSS
|
---|
| 55 | source-map information is not available at url() declaration
|
---|
| 56 | ```
|
---|
| 57 |
|
---|
| 58 | Some users find the node-sass `linefeed` option solves the problem.
|
---|
| 59 |
|
---|
| 60 | **Solutions**
|
---|
| 61 | * Try the node-sass [linefeed](https://github.com/sass/node-sass#linefeed--v300) option by way of `sass-loader`.
|
---|
| 62 |
|
---|
| 63 | **Work arounds**
|
---|
| 64 |
|
---|
| 65 | * Enable `removeCR` option [here](../README.md#options) (enabled by default on Window OS).
|
---|
| 66 | * Remove linebreaks in declarations in your `.scss` sources.
|
---|
| 67 |
|
---|
| 68 | **Diagnosis**
|
---|
| 69 | 1. Run a stand-alone sass build `npx node-sass index.scss output.css`.
|
---|
| 70 | 2. Use a hex editor to check line endings `Format-Hex output.css`.
|
---|
| 71 | 3. Expect `0DOA` (or desired) line endings. Single `0D` confirms this problem.
|
---|