No description, website, or topics provided.
Clone or download
Latest commit 0f451e5 Feb 13, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples update example code Mar 13, 2017
test Added support for full elm-css options Aug 31, 2017
.gitignore initial commit Mar 13, 2016
.travis.yml fix .travis.yml Mar 14, 2017
README.md Added an npm version badge 😊 Jun 1, 2017
index.js Added support for full elm-css options Aug 31, 2017
package-lock.json 3.4.0 Feb 13, 2018
package.json 3.4.0 Feb 13, 2018

README.md

Elm CSS loader npm version Travis build Status

Webpack loader for elm-css library

Installation

$ npm install --save-dev elm-css-webpack-loader

Usage

Documentation: Using loaders

In your webpack.config.js file:

module.exports = {
  module: {
    rules: [
      {
        test:    /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/, /Stylesheets\.elm$/],
        use: [
          'elm-hot-loader',
          'elm-webpack-loader'
        ] 
      },
      {
        test: /Stylesheets\.elm$/,
        use: [
          'style-loader',
          'css-loader',
          'elm-css-webpack-loader'
        ]
      }
    ]
  }
};

See the examples section below for the complete webpack configuration.

Options:

Cache (default false)

You can add cache=true to the loader:

  ...
  loader: "elm-css-webpack?cache=true"
  ...

If you add this, when using npm run watch, the loader will only load the dependencies at startup. This could be performance improvement, but know that new files won't be picked up and so won't be watched until you restart webpack.

This flag doesn't matter if you don't use watch mode.

Notes

Example

You can find an example in the example folder. To run dev server:

$ npm install
$ npm run start

You can find a more advanced example at elm-bootstrap-webpack-starter

Note about noParse

Even though elm-webpack-loader suggests to set the noParse option, elm-css-webpack-loader requires to parse the stylesheet module.

You can work around the problem by using the following regular expression:

{
  module: {
    noParse: /^((?!Stylesheet).)*\.elm.*$/,
    ...
  }
}

Revisions

1.0.0

Initial release, compatible with elm-css-2.0.0