Description
This is a question, not a bug report.
I'm looking for a little help when it comes to using a CSS preprocessor. I followed the instructions for Sass and everything works as advertised. 👍
My problem is that the framework I'm required to use also includes fonts, and when it imports those fonts it does so like this:
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 400;
src: url("../fonts/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-regular-webfont.woff") format("woff"), url("../fonts/sourcesanspro-regular-webfont.ttf") format("truetype"); }
So when I run a build I see
Module not found: Error: You attempted to import ../fonts/sourcesanspro-light-webfont.eot which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
That all makes sense.
I'm curious to know if you've seen something like this before and have a work around for it. I've tried adding a few extra scripts to copy the fonts directory from node_modules into src but of course that doesn't help because the @font-face is still going outside of src.
I can attempt another workaround by only including the .scss that I want from the framework (excluding the fonts) and downloading the fonts and checking them into my repo in the public directory, but wanted to see if I was missing an obvious solution first.
Thanks!