js-inline-css-webpack-plugin
v1.1.1
Published
A webpack plugin for convert external stylesheet to embedded into js stylesheet
Downloads
32
Readme
js-inline-css-webpack-plugin
This plugin inspired by html-inline-css-webpack-plugin but instead of injecting directly to the html, it injects css into js (useful for libraries and testing purposes) like:
document.body.appendChild(nodeWithStyles);
Require mini-css-extract-plugin.
Install
NPM
npm i js-inline-css-webpack-plugin -D
Yarn
yarn add js-inline-css-webpack-plugin -D
Minimal example
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const JsInlineCssWebpackPlugin = require("js-inline-css-webpack-plugin").default;
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin(),
new JsInlineCssWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
Config
interface Config {
filter?(fileName: string): boolean
leaveCSSFile?: boolean
}
filter(optional)
filter?(fileName: string): boolean
Return true
to make current file internal, otherwise ignore current file.
example
...
new JsInlineCssWebpackPlugin({
filter(fileName) {
return fileName.includes('main');
},
}),
...
leaveCSSFile(optional)
if true
, it will leave CSS files where they are when inlining