Install
🔮 Support for other build systems (such as Parcel) will be added in future releases.
The first step is to install the dependency
immutable-styles
:npm install immutable-styles
Next, since immutable styles uses JSX the following devDependencies are required:
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/plugin-transform-react-jsx
npm install --save-dev @babel/plugin-transform-react-jsx-source
npm install --save-dev babel-loader
Note on devDependenciesIt would be reasonable to assume the packages@babel/plugin-transform-react-jsx
and@babel/plugin-transform-react-jsx-source
indicate that immutable styles is coupled to React. Don't let the package names fool you! These packages enable immutable styles to use JSX and nothing more. Immutable styles is markup agnostic – meaning it isn’t coupled or biased to a specific way of generating HTML.
In
webpack.config.js
add the ImmutableStylesWebpackPlugin
:var { ImmutableStylesWebpackPlugin } = require('immutable-styles');
module.exports = {
plugins: [
new ImmutableStylesWebpackPlugin()
]
}
module.exports = {
/* ... */
devtool: "source-map",
node: {
fs: 'empty'
}
}
Note on Source MapsSource maps are required for compile-time errors. If source maps are not enabled the errorMissing Source Maps
will be thrown.
By default the CSS generated by immutable styles is located in
dist/bundle.css
. This can be optionally configured when initialising the plugin:module.exports = {
plugins: [
new ImmutableStylesWebpackPlugin({
dist: './custom-path-to-file.css'
})
],
/* ... */
}
Then make sure the immutable style sheets are passed through
babel-loader
:module.exports = {
/* .. */
module: {
rules: [
{
test: /\.iss\.jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
/* ... */
]
And lastly in
.babelrc
register the following presets and plugins:{
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
]
],
"plugins": [
"@babel/plugin-transform-react-jsx",
"@babel/transform-react-jsx-source"
]
}
Some examples of using immutable styles with Webpack can be found in the following repos:
Last modified 4yr ago