Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

☄️ A webpack plugin to convert external stylesheets into embedded stylesheets

License

NotificationsYou must be signed in to change notification settings

runjuu/html-inline-css-webpack-plugin

Repository files navigation

MIT LicencePRs WelcomeTotal downloadsnpm version

Convert external stylesheet to embedded stylesheet, aka document stylesheet.

<link rel="stylesheet" /> => <style>...<style/>

Requiremini-css-extract-plugin andhtml-webpack-plugin

Install

NPM

npm i html-inline-css-webpack-plugin -D

Yarn

yarn add html-inline-css-webpack-plugin -D

Minimal example

constMiniCssExtractPlugin=require("mini-css-extract-plugin");constHtmlWebpackPlugin=require('html-webpack-plugin');constHTMLInlineCSSWebpackPlugin=require("html-inline-css-webpack-plugin").default;module.exports={plugins:[newMiniCssExtractPlugin({filename:"[name].css",chunkFilename:"[id].css"}),newHtmlWebpackPlugin(),newHTMLInlineCSSWebpackPlugin(),],module:{rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}]}}

Config

interfaceConfig{filter?:(fileName:string)=>booleanstyleTagFactory?:(params:{style:string})=>stringleaveCSSFile?:booleanreplace?:{target:stringposition?:'before'|'after'removeTarget?:boolean}}

filter(optional)

filter?:(fileName:string)=>boolean

Returntrue to make current file internal, otherwise ignore current file. Include both css file and html file name.

example
...newHTMLInlineCSSWebpackPlugin({filter(fileName){returnfileName.includes('main');},}),...

styleTagFactory(optional)

styleTagFactory?:(params:{style:string})=>string

Used to customize the style tag.

example
...newHTMLInlineCSSWebpackPlugin({styleTagFactory({ style}){return`<style type="text/css">${style}</style>`;},}),...

leaveCSSFile(optional)

iftrue, it will leave CSS files where they are when inlining

replace(optional)

replace?:{  target:string  position?:'before'|'after'// default is 'before'  removeTarget?:boolean// default is false}

A config for customizing the location of injection, default will add internal style sheet before the</head>

target

A target for adding the internal style sheet

position(optional)

Add internal style sheetbefore/after thetarget

removeTarget(optional)

iftrue, it will remove thetarget from the output HTML

Please note that HTML comment is removed by default by thehtml-webpack-plugin in production mode.#16

example
<head><!-- inline_css_plugin --><style>/* some hard code style */</style></head>
...newHTMLInlineCSSWebpackPlugin({replace:{removeTarget:true,target:'<!-- inline_css_plugin -->',},}),...
output:
<head><style>/* style from *.css files */</style><style>/* some hard code style */</style></head>

Packages

No packages published

Contributors6

[8]ページ先頭
©2009-2025 Movatter.jp