Related questions

Importing CSS from node_modules into a Create React App

2018-07-11 03:38 beek imported from Stackoverflow

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

See also questions close to this topic

  • Uncaught TypeError: PouchDB.plugin is not a function

    When i execute the code belove, this error shows up: Uncaught TypeError: PouchDB.plugin is not a function. If i install the pouchdb package from npm and change the first line accordingly, then the plugin part works but if i want to use a function from pouchdb-authentication i getting a function not found error.

    const PouchDB = require('pouchdb-browser');

let auth = require('pouchdb-authentication');

PouchDB.plugin(auth);

    The code should execute without errors and the functions from the authentication plugin should work.

  • react-loadable higher order component

    I'm trying to use react-loadable to implement code splitting, and as suggested in the docs I've created a HOC for it, like this:

    export default function({ componentPath }) {
  return Loadable({
    loader: async () => {      
      const component = await import(componentPath)
      return component;
    },  
    delay: 200
  });
}

    and I use it like this

    import withLoadable from "hoc/withLoadable";

....

const Home = withLoadable({componentPath: "containers/Home"});

    but I got the following error

    Error: Cannot find module 'containers/Home'
    at eval (eval at ./src/hoc lazy recursive (main.chunk.js:formatted:98), <anonymous>:5:11)

    Referring to the docs here, they mentioned this issue and how to solve it, I tried to add the modules, and webpack attributes but it didn't work.

    BTW: in webpack.config.js I've added the "src" directory to the resolve modules like this:

    ...
resolve: {
      // This allows you to set a fallback for where Webpack should look for modules.
      // We placed these paths second because we want `node_modules` to "win"
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebook/create-react-app/issues/253
      modules: ['src','node_modules'].concat(
        // It is guaranteed to exist because we tweak it in `env.js`
        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
      ),
...

    I'm sure I miss something, but I can get it ...

  • How can I setup SCSS files (ViewEncapsulated way) in 'react app 2' like Angular component specific SCSS?

    I installed 'react app 2' as well as node-sass. It's working fine with SCSS. But I just want to know how can I create component specific SCSS like Angular (that will never be a conflict with other components SCSS)

    Angular automatically add an attribute for ViewEncapsulation see below example

    enter image description here

    enter image description here

    enter image description here

    In angular, there is an option for

    encapsulation: ViewEncapsulation.None (Use to disable CSS Encapsulation for this component) enter link description here

  • How to make detective transition for the section in the viewport (go to provided link to watch the video)

    enter image description here

    I have a webpage with multiple sections with unique id's associated with it. I want to show the number with little line in the background (line is bit large for the active section with number and small line for other sections) for the current section with transition from one section to another.

  • How can I do this with sass and react?

    I have a component that render some buttons in the page. To style the buttons I am using .scss so the classes looks like this: 

    className={styles.tag}

    and the corresponding scss is like this: 

    .tagsContainer {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;


    .tag  {
        display: block;
        background-color: #f4f4f4;

        i {
            margin-left: 50px;
            font-size: 1.4em;
        }
    }

    I was lookin to this codePen that does what I want but is using normal css: Adding and removing classes

    How can I adapt that code to use it with scss nad more exactly with this syntax: {styles.tag}?

    Regards Americo

    THIS IS AN UPDATE: I tested this code:

    <div  onClick={(e) => { e.stopPropagation(); this.collectTags(tag); }}>
            <p className={`${this.state.addClass == true ? styles.tag : ""}`}
                ># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></p>
        </div>

    look closely to the p-tag. this code is changing the style onClick but the problem is that is changing all the p-tags in the compoenent and not only the one that was clicked.

  • Create React App (without ejecting) & ANTD Design & SCSS & Create App Rewired config

    I need config next pack - React and ANTD Design with using SCSS for customizing theme.

    My problem is - i don't know how to config this pack. I'm trying use create-app-rewired (because i don't wanna eject CRA) for webpack configuration but my attempts were failure.

    Maybe somebody came across with this task and have turnkey solution.

  • How to add custom lint rules in create-react-app without ejecting the boilerplate?

    I'm trying to add custom lint rules on top of the lint rules that come out of the box with create-react-app. Doing so throws error about versioning issue of certain lint packages while running the build.

  • Default location for compiled js files in create-react-app --typescript

    I'm using the typescript version of create-react-app. I'm only using npm start (not npm build).

    I'd like to inspect the js files create by typescript but I can can't find a build folder. Where are the compiled files saved?

  • node sass chokidar problem @import css when load css library

    Error: File to import not found or unreadable.

    Estou utilizando a versão mais recente do react

    index.scss
@import '~bulma/bulma'

    "react": "^16.7.0", "node-sass-chokidar": "^1.3.4",

    "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive ",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },


  "status": 1,
  "file": "/Users/marcelo/Dropbox/Projetos/IRMEI/app-mobile/src/index.scss",
  "line": 1,
  "column": 1,
  "message": "File to import not found or unreadable: ~bulma/bulma.",
  "formatted": "Error: File to import not found or unreadable: ~bulma/bulma.\n        on line 1 of src/index.scss\n>> @import \"~bulma/bulma\";\n\n   ^\n"
  • npm run build does not update the react components

    i have a react project with the following package.json : 

        {
  "name": "commonsensev2.0",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://localhost:9080/server/react",
  "dependencies": {
    "all": "0.0.0",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.7.3",
    "moment": "^2.23.0",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.1.5",
    "popper.js": "^1.14.6",
    "react": "^16.7.0",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-table": "^4.3.1",
    "react-chartjs2": "^1.2.1",
    "react-dom": "^16.7.0",
    "react-localize-redux": "^2.17.5",
    "react-moment": "^0.7.9",
    "react-redux": "^5.1.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/sass/App.scss -o src/css/",
    "watch-css": "npm run build-css && node-sass-chokidar src/sass/App.scss -o src/css/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "postbuild": "((ROBOCOPY build ../react /MIR) ^& if %ERRORLEVEL% lss 8 set ERRORLEVEL = 0)",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "bootstrap-toggle": "^2.2.2",
    "datatables.net": "^1.10.19",
    "numeral": "^2.0.6"
  }
}

    when i do npm run build i cannot see the changes on the html pages, i m using node 8.11.1 i downgraded it because i found somewhere that it maybe the reason why it does not work i'm also using "node-sass-chokidar": "0.0.3" and the backend is a java server

  • node-sass-chokidar --watch --recursive not working

    I am compiling a scss into css with node-sass-chokidar from npm

    This is my command:

    "watch-css": "node-sass-chokidar ./src/styles/scss/ -o ./src/styles/css/ --watch --recursive"

    After npm run watch-css and after editing my file 2 or more times its displaying: This

    As you can see it dose not watch my files more than 2 times

    Idk why