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


Tags: javascript,css,webpack,webpack-style-loader

Problem :

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 fails.

Could you provide example how to load static styles from node_modules?

My current webpack config below. Additionaly I'm using extract-text-webpack-plugin and sass-loader my project scss files are working well, I have also css-loader, have I to resolve static css files or add something to stylePathResolves?

//require('leaflet/dist/leaflet.css');

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var path = require('path');

var stylePathResolves = (
  'includePaths[]=' + path.resolve('./') + '&' +
  'includePaths[]=' + path.resolve('./node_modules')
)

module.exports = {
  entry: ".js/app.js",
  output: {
    path: "./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
        )
      }
    ]
  },
  plugins: [new ExtractTextPlugin("app.css")]
};

Where to load leaflet.css, commented out require('leaflet/dist/leaflet.css') gives me following error:

home/myproj/node_modules/leaflet/dist/leaflet.css:3
.leaflet-map-pane,
^

SyntaxError: Unexpected token .


Solution :

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.


    CSS Howto..

    how to add css for div tag

    Slideshow with specific Text on each Image

    How to output CSS counter from Sass mixin

    How to make a progress bar

    How does Media Queries Reacts

    How to recognise when it is appropriate to code CSS [closed]

    How to use a CSS animation within a JavaScript plugin?

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How to detect a smartphone through JavaScript/CSS?

    How can I add a hover event to multiple paths in a SVG? And have it work in IE9?

    How to apply styles to a group of Labels in javafx without css

    How do I remove a CSS class from one anchor and assign it to another using jquery?

    How to increase rotate value

    How does one know exact pixel size / relationships between CSS elements?

    Show some characters above a picture on hover

    How to make css-menu independent of the number of menu items?

    JSF - How can I format my global messages in in a visually appealing way?

    How to use first-child?

    Hide and show when click a button

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    How to center a text nav bar with CSS

    How to properly center a 100% width div in css

    How to use CSS attribute selector for an SVG element with namespaced attribute href?

    How do I add a link to my CSS background?

    How to attribute different ids to child elements depending on the number of parent-like elements in that container

    CSS IE7 How can I force UL inside LI to be wider than the parent

    How to prevent div become two rows?

    How to make font-size less for 2px than parent element?

    How to add mouse hover properties to pie drawn on a node in d3?

    Only show one hidden table row at a time