Webpack loader for elm-css library
$ npm install --save-dev elm-css-webpack-loader
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.
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.
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
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.*$/,
...
}
}
Initial release, compatible with elm-css-2.0.0