minor #940 Clarify missing css file error message (Gadgetdude)

This PR was squashed before being merged into the main branch.

Discussion
----------

Clarify missing css file error message

As a new user I came across a very confusing error message which took me way too long to debug. I was trying to set up the new webpack-encore configuration to use the `twig-loader`. I followed all the instructions, but I kept getting the following error:
```
./node_modules/twig/twig.js contains a reference to the file path.
This file can not be found, please check it for typos or update it if the file got moved.
```

Since "file path" is a very commonly used phrased, I did not realise that it meant that the file (or dependency) `path` was missing. Searching online also didn't help me out.

I'm not sure what the best solution is (or if it's an accepted edge case), but having it highlighted could save some new users a lot of time and frustration when starting out. I decided on simple quotes since that works regardless of colours are enabled in the terminal.

Commits
-------

897c107 Clarify missing css file error message

Author: weaverryan

lib/friendly-errors/formatters/missing-css-file.js

@@ -22,7 +22,7 @@ function formatErrors(errors) {
         chalk.red('Module build failed: Module not found:')
     );
     for (let error of errors) {
-        messages.push(`${error.file} contains a reference to the file ${error.ref}.`);
+        messages.push(`"${error.file}" contains a reference to the file "${error.ref}".`);
         messages.push('This file can not be found, please check it for typos or update it if the file got moved.');
         messages.push('');
     }

lib/friendly-errors/formatters/missing-loader.js

@@ -50,7 +50,7 @@ function formatErrors(errors) {
         if (error.loaderName) {
             messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To ${loaderFeatures.getFeatureDescription(error.loaderName)}:`);
         } else {
-            messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To load ${error.file}:`);
+            messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To load "${error.file}":`);
         }
 
         let index = 0;

test/friendly-errors/formatters/missing-css-file.js

@@ -39,7 +39,7 @@ describe('formatters/missing-css-file', () => {
             };
 
             const actualErrors = formatter([error]);
-            expect(JSON.stringify(actualErrors)).to.contain('/some/file.css contains a reference to the file ../images/foo.png');
+            expect(JSON.stringify(actualErrors)).to.contain('\\"/some/file.css\\" contains a reference to the file \\"../images/foo.png\\"');
             expect(JSON.stringify(actualErrors)).to.contain('This file can not be found, please check it for typos or update it if the file got moved.');
             // all needed packages will be present when running tests
             expect(JSON.stringify(actualErrors)).to.not.contain('yarn add');

test/friendly-errors/formatters/missing-loader.js

@@ -52,7 +52,7 @@ describe('formatters/missing-loader', () => {
             };
 
             const actualErrors = formatter([error]);
-            expect(JSON.stringify(actualErrors)).to.contain('To load /some/file.jpg');
+            expect(JSON.stringify(actualErrors)).to.contain('To load \\"/some/file.jpg\\"');
             expect(JSON.stringify(actualErrors)).to.contain('You may need to install and configure a special loader');
         });