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'
      }
    }