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.
|
---|