Webpack 2/3/4 support for modular-css.
This package contains two entry points, you will need to use both in tandem for things to work!
-
@modular-css/webpack/pluginprovides a webpack plugin you can use to transform imported.cssfiles into lookup objects while outputting CSS to disk. -
@modular-css/webpack/loaderprovides the file loader that does the actual transformation on files.
> npm i @modular-css/webpack// webpack.config.js
const path = require("path");
const CSSPlugin = require("@modular-css/webpack/plugin");
module.exports = {
entry : "./input.js",
output : {
path : path.resolve(__dirname, "dist"),
filename : "./output.js"
},
module : {
rules : [{
test : /\.css$/,
use : "@modular-css/webpack/loader"
}]
},
plugins : [
new CSSPlugin({
css : "./output.css",
json : "./output.json"
})
]
});Location to write the generated CSS file to, relative to output.path just like output.filename
Location to write out the JSON mapping file to, relative to output.path just like output.filename
Pass an already-instantiated Processor instance to the Webpack plugin. It will then add any files found when traversing the modules to it and both the Webpack-discovered and any already-existing files will be output in the final CSS.
All other options are passed to the underlying Processor instance, see Options.
You can disable exporting the style string, eg import { styles } from "./style.css";, by setting styleExport to false. Defaults to true.
...
module : {
rules : [{
test : /\.css$/,
use : {
loader : "@modular-css/webpack/loader",
options : {
styleExport : true,
}
}
}]
},
...You can disable exporting classes as default export, eg import styles from "./style.css";, by setting defaultExport to false. Defaults to true.
...
module : {
rules : [{
test : /\.css$/,
use : {
loader : "@modular-css/webpack/loader",
options : {
defaultExport : false,
}
}
}]
},
...You can set variable declaration kind, eg var mc_rule = ...;, by setting variableDeclaration to var. Defaults to const.
...
module : {
rules : [{
test : /\.css$/,
use : {
loader : "@modular-css/webpack/loader",
options : {
variableDeclaration : "var",
}
}
}]
},
...