Example of how to load static CSS files from node_modules using webpack?

Question

I don\'t know how to load with webpack any CSS from node_modules libs, for example I\'ve installed leaflet and each attempt of load leaflet/dist/leaflet.css fai

Answer 1

I had to do:

npm install --save-dev style-loader css-loader file-loader

If I didn't configure the file loader for the images, I got:

ERROR in ./node_modules/leaflet/dist/images/layers-2x.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:8888-8921
 @ ./node_modules/leaflet/dist/leaflet.css
 @ ./src/view/component/RouteMap.js
 @ ./src/index.js

ERROR in ./node_modules/leaflet/dist/images/layers.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:8716-8746
 @ ./node_modules/leaflet/dist/leaflet.css
 @ ./src/view/component/RouteMap.js
 @ ./src/index.js

ERROR in ./node_modules/leaflet/dist/images/marker-icon.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/leaflet/dist/leaflet.css (./node_modules/css-loader!./node_modules/leaflet/dist/leaflet.css) 7:9975-10010
 @ ./node_modules/leaflet/dist/leaflet.css
 @ ./src/view/component/RouteMap.js
 @ ./src/index.js

You also MUST import the CSS file in your index.js or main.js (or whatever your main JS file is called). Otherwise, you get an error saying that module.exports is read-only.

import 'leaflet/dist/leaflet.css';

A more updated webpack.config.js snippet is:

{
    ...
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader","css-loader"] },
            { test: /\.(png|svg|jpe?g|gif|woff2?|ttf|eot)$/, use: [ 'file-loader' ] },
        ],
    },

Answer 2

For users who have encountered a similar problem, there are steps that I've done to get it working, I'm not sure that this equilibrium way.

1. npm install file-loader --save
2. add import 'leaflet/dist/leaflet.css'; in main app.js
3. change webpack.config.js by following way:

add css-loader to get rid of SyntaxError: Unexpected token . and next add file-loader and match files to get rid of Uncaught Error: Cannot find module "./images/layers.png":

module.exports = {
  entry: "./web/static/js/app.js",
  output: {
    path: "./priv/static/js",
    filename: "app.js"
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'style',
        'css' + '!sass?outputStyle=expanded&' + stylePathResolves
      )
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file-loader'
    }]
  },
  plugins: [new ExtractTextPlugin("app.css")]
};

At the beginning I got this config from some example and it's not 100% clear why I've used ExtractTextPlugin to load scss and what the correlation is with css-loader, maybe to be more coherent should I use ExtractTextPlugin also in this part, maybe someone knows and can code review? But my solution is working and I can work further.