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

bundle.js served via webpack not working for webpack-dev-middleware + HtmlWebpackPlugin

So, I am trying to use webpack-dev-middleware & webpack-hot-middleware with HtmlWebpackPlugin and for that I have followed the following links https://github.com/jantimon/html-webpack-plugin/issues/145 but I really can't understand what is suggested here.

Anyway, I do get the bundle.js file in the output html but the js doesn't execute as expected.Also, I do get HMR Connected message in the console. The same does work for my production webpack file though.

How can I fix this or go about resolving this ?

Also, as per the project structure below I have multiple html files being served so any inputs on the amalgamation of these in the srcServer.js ?

package.json

...
    "start": "babel-node buildScripts/srcServer.js"
...

srcServer.js

/* eslint-disable */
import express from 'express'
import path from 'path'
import opn from 'opn'
import bodyParser from 'body-parser'
import historyApiFallback   from 'connect-history-api-fallback'
import WebpackDevMiddleware from 'webpack-dev-middleware'
import WebpackHotMiddleware from 'webpack-hot-middleware'
import WebpackConfig from '../webpack.config'
import webpack from 'webpack'

const compiler = webpack(WebpackConfig)
const app = express()
const port = 8080

app.use(historyApiFallback({
  verbose: false
}))

app.use(WebpackDevMiddleware(compiler, {
  publicPath: WebpackConfig.output.publicPath,
  hot: true,
  quiet: false,
  noInfo: false,
  lazy: false,
  stats: {
    colors: true
  }
}))

app.use(WebpackHotMiddleware(compiler))

app.use(bodyParser.urlencoded({ extended: false}))
app.use(bodyParser.json())

app.use('*', function (req, res, next) {
  console.log(req.url)
  var filename = path.join(compiler.outputPath,'login/login.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});

require('dotenv').config()
const mongoose = require('mongoose')
const User = require('../models/User')

mongoose.connect(process.env.DATABASE);
mongoose.Promise = global.Promise;
mongoose.connection
  .on('connected', () => {
    console.log(`Mongoose connection open on ${process.env.DATABASE}`);
  })
  .on('error', (err) => {
    console.log(`Connection error: ${err.message}`);
  });
mongoose.model('User')

app.get('/users', function (req, res) {

  User.find().lean().exec(function (err, users) {
    return res.end(JSON.stringify(users));
   })

})

app.get('/questions', function (req, res) {
   res.json([
     { 'id':1, 'header': 'Qheader', 'question': 'Question', 'description': 'Description' },
     { 'id':2, 'header': 'Qheader1', 'question': 'Question1', 'description': 'Description1' }
   ])
})

// set up routing
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/login/login.html'))
})

app.get('/dashboard', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/dashboard/dashboard.html'))
})

app.get('/assessments', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/assessments/assessments.html'))
})

app.get('/registration', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/registration/registration.html'))
})

app.get('/success', function (req, res) {
  res.sendFile(path.join(__dirname, '../dist/responses/success.html'))
})

app.post('/registerUser', function (req, res) {

  var user=new User({
    name:req.body.uname,
    uname:req.body.email,
    pass:req.body.pass
    })

  user.save().then(item => {
      console.log('success')
      res.send("success")
    }).catch(err => {
      console.log('fail')
      res.status(400).send("failure")
    })

})

// set up listening
app.listen(port, function (err) {
  if (err) {
    console.log(err)
  } else {
    opn('http://localhost:' + port)
  }
})

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client?http://localhost:8080&timeout=20000', './src/login/app.js'
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [

    new webpack.HotModuleReplacementPlugin(),

    new CopyWebpackPlugin([
      {
        from: './src/images/',
        to: 'images/',
        force: true
      },
      {
        from: './node_modules/bootstrap/fonts/',
        to: 'node_modules/bootstrap/fonts/',
        force: true
      }
    ]),

    new HtmlWebpackPlugin({
      filename: 'login/login.html',
      template: './src/login/login.html',
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'dashboard/dashboard.html',
      template: './src/dashboard/dashboard.html',
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'assessments/assessments.html',
      template: './src/assessments/assessments.html',
      inject: true
    }),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '../../node_modules/bootstrap/fonts/[name].[ext]'
          }
        }
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '../images/[name].[ext]'
          }
        }
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            name: '../*/[name].[ext]'
          }
        }
      }
    ]
  }
}

Project Structure

Chrome Inspection

Webpack js bundle gets loaded but not executed

I have three webpack config files. One for production, one for development and one for common configurations. When i run the dev config the js file gets loaded, i can see that in the browser dev tools, but it does not get executed. If i run the production config every thing works fine.

I use: node v10.3.0, yarn v1.7.0, webpack 4.19.1, webpack cli 3.1.0

webpack.common.js here are my entries my output and my loaders :

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        app: ['./src/javascript/entry.js', './src/scss/main.scss', './src/images/entryImages.js'],
    },
    output: {
        filename: "javascript/[name].js",
        path: path.resolve(__dirname, "./dist"),
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: [
                                require('autoprefixer')({'browsers': ['> 1%', 'last 2 versions']}),
                            ]
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]

            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env'],
                    }
                }
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]',
                    publicPath: '/public/resources/themes/zimet/dist/',
                }
            },
        ]
    },
}

webpack.dev.js:

 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const WebpackShellPlugin = require('webpack-shell-plugin');


 module.exports = merge(common, {
     devtool: 'source-map',
     mode: 'development',
     watch: true,
     optimization: {
         splitChunks: {
             chunks: "all"
         }
     },
     plugins: [
         new LiveReloadPlugin({
             protocol: 'http',
             hostname: '127.0.0.1',
             appendScriptTag: true
         }),
         new CleanWebpackPlugin(['dist']),
         new MiniCssExtractPlugin({
             filename: 'css/[name].css',
             chunkFilename: "[id].css"
         }),
         new WebpackShellPlugin({onBuildExit:['cd ../.. &&  composer vendor-expose']})
     ]
 })

webpack.production.js:

const glob = require('glob-all');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const {ImageminWebpackPlugin} = require("imagemin-webpack");
const imageminOptipng = require("imagemin-optipng");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminSvgo = require("imagemin-svgo");
const PurifyCSSPlugin = require("purifycss-webpack");
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.common.js');
const merge = require('webpack-merge')
const RemoveHeadTagPlugin = require('./removeHeadTagPlugin');
const WebpackShellPlugin = require('webpack-shell-plugin');

const templateBaseDirName = __dirname + '/templates/'

let Files = glob.sync([templateBaseDirName + "**/*.ss"]);


module.exports = merge(common, {
    mode: 'production',
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: "[id].css"
        }),
        new PurifyCSSPlugin({
            paths: (Files),
            purifyOptions: {
                minify: true,
                info: true,
                rejected: true,
                whitelist: ['*js*']
            }
        }),
        new ImageminWebpackPlugin({
            imageminOptions: {
                plugins: [
                    imageminOptipng({
                        optimizationLevel: 5
                    }),
                    imageminGifsicle({
                        interlaced: true
                    }),
                    imageminJpegtran({
                        progressive: true
                    }),
                    imageminSvgo({
                        removeViewBox: true
                    })
                ]
            }
        }),
        new HtmlWebpackPlugin({
            excludeChunks: ['app'],
            filename: 'icons.ss',
            template: './src/icons/icons.html',

        }),
        new WebappWebpackPlugin({
            logo: './src/icons/icon.svg',
            prefix: 'icons/',
            emitStats: false,
            persistentCache: true,
            inject: 'true',
            background: '#fff',
            title: 'Webpack App',
            icons: {
                android: true,
                appleIcon: true,
                appleStartup: true,
                coast: false,
                favicons: true,
                firefox: true,
                opengraph: false,
                twitter: false,
                yandex: false,
                windows: false
            }
        }),
        new RemoveHeadTagPlugin(),
        new WebpackShellPlugin({onBuildExit: ['cd ../.. &&  composer vendor-expose']}),
    ],
})

My JS code i want to run:

document.addEventListener("DOMContentLoaded", () => {
     alert('hello world');
     console.log('now');
});

My entry.js:

// get all files from same directory that end with .js
// this will save us from requiring every js file

function requireAll(r) { r.keys().forEach(r); }

requireAll(require.context('./', false, /\.(js)$/));

Any ideas on what went wrong?

Webpack file-loader inject the same URL to the HTML and CSS file
The problem is file-loader will always inject the same URL to the both HTML and CSS files.

I have got the flowing project structure

Webpack File-loader configuration
```
        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [{
                    loader: 'file-loader',
                    options: {

                        name: '[name].[ext]',
                        outputPath: "assets/images",
                        publicPath: '../images'

                    }
                }

            ]
        }
```
When I use publicPath: '../images' It will inject flowing URL to the HTML and CSS file

HTML
```
<img src='../images/team-1@2x.png'/>
```
CSS
```
background-image: url(../images/test-image.jpg);
```
both URLs are the same but it's ok for the CSS file.

When I use publicPath: './assets/images' It will inject flowing URL to the HTML and CSS file

HTML
```
<img src='./assets/images/team-1@2x.png' />
```
CSS
```
background-image: url(./assets/images/test-image.jpg);
```
both URLs are the same but it's ok for the HTML file.

Actually what I want to achieve is File loader will inject different URL to the HTML and CSS files.

Look like this

HTML
```
<img src='./assets/images/team-1@2x.png' />
```
CSS
```
background-image: url(../images/test-image.jpg);
```
How can I configure Webpack for getting exactly above result
React css precedence
I have a button component that only shows when required (it is for page down and therefore does not show on the first page).

I have done that with this code:
```
         <button 
            id="hidemeonmain"
            onClick={this.pageDown}
            className={this.state.count <2 
              ? 'hidden' 
              : 'clean' }
          > 
        <FontAwesomeIcon 
          icon="angle-left" 
          size="2x"
        />
        </button>    
```
However I want to hide this button when on a @media query for max-width 736pxFOR ALL VALUES OF STATE.

I am doing this by giving it an id and hiding this in the css. However when the state gets updated it re-shows the button even with an !importantin the @media display:none style.

I thought that the id and important would have precedence over the general class.

Any ideas how to resolve this please?

TIA

EDIT: I have amended this with the correct button!! and included the #id css.
```
 #hidemeonmain {
    display: none !important;
```
I think what is happening is that when the other button (increment) is pressed this increases state and therefore effects the change in class from the ternary which is overriding the #id with the display: hidden !important;
How to apply multiple color on a single td's border (left side only)? Just like below attached image

I have tried out background-image: linear-gradient(to top, red 50%, green 50%).

But It's covering the whole checkbox and add colours from top to bottom.

I want to apply only on the left side border only.
SCSS: Cannot identify corresponding styling in console

I am trying to correct some styling errors in my local environment, I was able to do it for one of my elements, but console does not provide corresponding selector for the other element, however, I can see and manipulate the css selectors in the dev environment.

This is what I see in my dev environment:

but in my local environment, I get this: They are not there. What governs this behavior? Even when I identify the correct selectors in my codebase and make the change and refresh, the change does not take place in my local environment, yet I can make these changes rather easily in console of the dev version of the site.

What gives?
main.js url different from chunks url on deployment while code splitting with create-react-app

I'm using React as my frontend, Django as my backend, hosting my site on Heroku and my staticfiles on AWS S3.

I've followed the CRA Code Splitting docs and while it works in development, when I deployed my site, my main.js was referenced correctly through https://mywebsite.s3.amazonaws.com/static/js/main.js while my chunks are being referenced through http://mywebsite.com/static/js/2.chunk.js.

I prefer not to run eject so the things I've tried included setting homepage to my s3 bucket link but this did not work. Any help would be much appreciated!

material-ui and react does not reproduce same behavior after `npm run build`?

I am working on creating a content-library, where I am using react-app using create-react-app. The package.json looks like

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^1.4.1",
    "@material-ui/icons": "^2.0.1",
    "firebase": "^5.3.0",
    "md5": "^2.2.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-flexbox-grid": "^2.1.2",
    "react-katex": "^2.0.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

When running yarn install && yarn start the application comes out fine, see the snapshot below
While when I ran yarn build && serve -s build or npm run build && serve -s build , the application does not look the same and UX is messed up, see below
The yarn.lock file is linked https://pastebin.com/dDHnvRWA

Expected Behavior

The page on yarn start and one after running npm run build && serve -s build should exactly be the same

Current Behavior

The page that comes up after npm run build && serve -s build are different (see snapshots attached)

Your Environment

| Tech         | Version |
|--------------|---------|
| Material-UI/core  | ^1.4.1 |
| Material-UI/icons | ^2.0.1|  
| React        |    ^16.4.1     |
| Browser      |   Google Chrome Version 68.0.3440.106 (Official Build) (64-bit)      |
| TypeScript   |      None   |
| etc.         |         |

Fully include Google web font in create-react-app build (without ejecting)

I need to include a Google web font in the build of a React webapp using create-react-app. This is, because the app will be served on a wifi without internet access. The most straightforward solution seems to be google-fonts-webpack-plugin, but it needs a customized webpack config.

Is there any "simple" solution that downloads and includes all the web font resources automagically without the requirement to eject from create-react-app?
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)
node-sass-chokidar will only output a folder instead of just a file into my src directory
Simple question here, and probably a stupid one. I'm trying to get node-sass-chokidar to output a main.css file into src in my react application but I can only get it to output a main.css directory with the main.css file in it.
```
"build-css": "node-sass-chokidar src/sass/main.scss -o src/main.css"
```