Importing CSS from node_modules into a Create React App

See also questions close to this topic

• Module parse failed: Unexpected character '#' in production mode

  I am new to express with react and I developed the website by express and react. The point is to publish the production.The site is going well in development mode but it's not working in production mode.I know that bundling configuration for express in dev mode is simpler than prod mode.I just set NODE_ENV=production for production mode.But it occurred error.

  I am using express generator and when I build the express for bundle, there will be such errors

  ERROR in ./bin/www 1:0
  Module parse failed: Unexpected character '#' (1:0)
  You may need an appropriate loader to handle this file type.
  > #!/usr/bin/env node
  |
  | /**
  

  And My webpack configuration file of express is

  const path = require('path');
  const nodeExternals = require('webpack-node-externals');
  
  module.exports = {
      entry: './index.js',
      mode: 'production',
      output: {
          path: path.resolve(__dirname + '/public'),
          filename: 'backend.js',
      },
      module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
              },
            },
          ]
      },
      target: 'node',
      externals: [nodeExternals()],
  };
  

  What is default NODE_ENV? I want to know that. and How can I fix this bug?
• How do I interpolate ejs for internationalization?

  I've inherited this codebase from a previous developer and have been tasked with adding internationalization.

  I'm using i18next to handle the selection from a few different JSONs containing various translations. Ideally I would like to be able to call i18next.t('home.meta-title') etc.. in the ejs template. If that can't be achieved I would like to be able to pass an object with all the relevent strings to the template for interpolation.

  At this time I can't figure out how to pass data to the templates. The project has a webpack config which is handling the linking of the ejs and js files and looks like :

  new HtmlWebpackPlugin({ filename: 'index.html', template: path.join(process.cwd(), 'src', 'templates', 'home.ejs'), inject: true, hash: true, test: 'TEST', excludeAssets: [ /(availabilityView|availability|press|legal|visit|addons).(js|css)$/ ], minify: { removeComments: true, collapseWhitespace: false } }),
• Trying to get this webpack build to work on heroku

  It will compile successfully but when you try to open it there is an application error. Here is the log:

  2018-11-20T15:48:28.302771+00:00 heroku[web.1]: Process exited with status 0
  2018-11-20T15:48:28.328898+00:00 heroku[web.1]: State changed from starting 
  to 
  crashed
  2018-11-20T16:00:23.755348+00:00 heroku[router]: at=error code=H10 desc="App 
  crashed" method=GET path="/" host=murmuring-journey-84879.herokuapp.com 
  request_id=f4c9fa99-c073-4928-bbc6-4573062c6df8 fwd="74.110.201.197" dyno= 
  connect= service= status=503 bytes= protocol=https
  2018-11-20T16:00:29.207415+00:00 heroku[router]: at=error code=H10 desc="App 
  crashed" method=GET path="/favicon.ico" host=murmuring-journey- 
  84879.herokuapp.com request_id=7db5a588-d96a-4cb5-9aa7-928f28d9a1d9 
  fwd="74.110.201.197" dyno= connect= service= status=503 bytes= 
  protocol=https
  

  I can see it's looking for a favicon, but I'm feeling totally clueless about it, the build seems to work locally just fine. Thanks everybody
• Sass or Jss? What is better with React app with Material-UI?

  I've worked on my React app with ES6 and Material-UI before. I was gonna use Sass for the project cuz I can stick to the basic format of Css. However, it got confusing to use styles reference from Sass and classes and withStyles things all together. So, I ended up with JSS as Material-UI works with it.

  I'm trying to start a new React project. For this time, I'm curious how others handle this thing when using React and Material-UI. Should I just go for JSS if I wanna use Material-UI? or is there a seamless way to use Sass with Material-UI?
• Nebular stepper Issue after completed

  I need help in nebular stepper, as we know that when the any step completed then the "checkmark" icon displayed but my use case is different I need the number will remain but color will change as same as icon (i.e. # ffffff).

  I am not able to override the scss for this. Please advise how can I override.

  Please find the screenshots of expected and current behavior:

  

  
• Some classess of my CSS file are not rendering into Django templates (most classess render without problems)

  I'm starting with Django, I've been throught this several hours, please help me!

  on my *.html file I have this code (and more):

  {% load static %}
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
  

  and since I added that static file, my page has style.. but some classes don't render, for example this div:

  <div class="nav-profile-image">
  

  If I delete the class .nav-profile-image from style.css, the page still the same, that image has no container, it's very strange.

  I uploaded all the app on branch "problems": https://github.com/franchodl/robohome/tree/problems

  view trying to render: home

  url for home: http://127.0.0.1:8000/propietario/

  template: ./own/templates/own/home.html

  static files: ./static

  Maybe the problem it's another thing, not the css, i downloaded the frontend from:

  https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template

  When I open it from index.html, the page works good, the problem is from Django.

  Any ideas??? I have no idea what else to check.

  THANKS!!!
• Where does create-react-app application store it's babel configuration when not ejected?

  I want to read from JS the babel configuration within a module I am doing.

  I do not use webpack, I only use babel with babel cli.

  Where can I find the babel configuration of a non ejected application made with create-react-app ?
• React Router Apache Rewrite rules

  I have an issue trying to deploy my react router app to an Apache server. I am using the mod_rewrite and have implemented the following rules in my .htaccess:

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /dir1/dir2/myapp/index.html [L,QSA]
  </IfModule>
  

  The app exists at http://server/dir1/dir2/myapp. This configuration works fine for a single path parameter (http://server/dir1/dir2/myapp/PARAM1), but gives a JS error if a second path parameter is included (http://server/dir1/dir2/myapp/:ROUTE1/:ROUTE2)

  When loading the a URL with 2 routes, I get:

  Uncaught SyntaxError: Unexpected token <

  The application is looking at http://server/dir1/dir2/myapp/PARAM1/static/js/main.chunk.js when the error is generated.
• Extracting and referencing multiple CSS files in ejected create-react-app

  I have an ejected create-react-app (webpack version 3.8.1) that will be implemented as a third-party widget on other websites. The components are rendered in multiple iframes using react-frame-component.

  When styling the components inside iframes I include the css in the head of the iframe. Right now I'm doing it by loading the css into a string like this:

  // IframeComponentOne.js
  const innerStyles = require("./iframe-component-one-styles.scss").toString();
  
  render() {
    return (
      <Frame
          head={<style>{innerStyles}</style>}
        >
        <CompA />
        <CompB />
        ...
      </Frame>
    )
  }
  
  // IframeComponentTwo.js
  const innerStyles = require("./iframe-component-two-styles.scss").toString();
  
  render () {
    return (
      <Frame
          head={<style>{innerStyles}</style>}
        >
        <CompC />
        <CompD />
        ...
      </Frame>
    )
  }
  

  However, to minimize bundle size, and defer css loading, I would like to extract the css into separate files and link to them in the iframes like this:

  render() {
    return (
      <Frame
        head={<link rel="stylesheet" href="specific-frame.[hash].css">}
      >
      <CompX />
      <CompY />
      ...
    )
  </Frame>
  

  I'm aware that I probably need to use extract-text-webpack-plugin to extract the different innerStyles, but can't the webpack setup right.

  How would a webpack setup for this look? How do I reference the extraced css bundles with content hashes in the head of the iframe components?
• 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
• Using Sass or Scss with Rails/React project

  I'm new using Rails, and I want to know what is the best way to using Sass or Scss in a project, I am currently using react-rails and webpacker.

  I need something like node-sass-chokidar. (Or a better alternative)