Importing CSS from node_modules into a Create React App
I've found loads of questions on this, but none of the answers are working..
I'm trying to import a font from node modules from this package into a Create React app
I've managed to get it compile with
@import './../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss';
however as soon as I run it I get
Module not found: You attempted to import ../../../fonts/roboto/Roboto-Black.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/.
I've tried with ~, node_modules and various other ways of getting it into the project. Any clues?
2 answers
-
answered 2018-07-11 03:43
Luis Gurmendez
I would create a assets/fonts/ directory inside src/ and put the fonts there :). Give it a try!
-
answered 2018-07-11 04:20
dysfunc
You'll need to do a couple things. Try this:
$roboto-font-path: '../../node_modules/roboto-fontface/fonts'; @import "../../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface";
Make sure to update your loaders to support fonts inside webpack.config.js
{ test: /\.(ttf|eot|woff|woff2)$/, use: { loader: 'file-loader', options: { name: 'fonts/[name].[ext]', }, }, }
You'll also need to include an SVG loader
npm install svg-loader --save-dev
Add loader config inside webpack.config.js
{ test: /\.svg$/, use: { loader: 'svg-loader' } }