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 read value of style[“display”] property of webcontrol

    How to change CSS to the same class but another input name

    How to make vertical menu with emenu extension in Yii?

    How do you read !important in CSS?

    CSS: How to remove the space around? [duplicate]

    How to neutralize CSS definitions without overriding

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    How to draw a line with button the center of the line

    How to calculate rotation angle from rectangle points?

    how to use 'selector gadget' to scrape data into R?

    How do I overlay text on an image who's size is to be set?

    How to select a group of elements after every nth-element in CSS?

    How can I get two buttons and textareas from separate forms to display inline?

    CSS, HTML issue. How would I get the main body of the document to be a certain way down from the top?

    How to remove dash inside text with CSS?

    Overlapping image in photoshop splice, how to float with CSS

    How can I correctly center this div into its container? What is wrong?

    Can User-Agent affect how CSS is rendered on a page?

    How to make a text box have rounded corners?

    How to access a directory one level up in CSS?

    How to render my dialog on top?

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How to disable custom animations from click, angular?

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    how to change a css background onclick

    How do I align three columns to the center using CSS?

    How to make the div at the screen center not lower right corner?

    how to get value from this html date-ranger?

    How to make a navbar appear in certain section of the page? (bootstrap too)

    How to reject specify HTML tags by using css or xpath selector