You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
9
+
8
10
```
9
11
<link rel="stylesheet" /> => <style>...<style/>
10
12
```
11
13
12
14
Require [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) and [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
Return `true` to make current file internal, otherwise ignore current file. Include both css file and html file name.
80
+
71
81
##### example
82
+
72
83
```typescript
73
84
...
74
85
newHTMLInlineCSSWebpackPlugin({
@@ -80,31 +91,89 @@ Return `true` to make current file internal, otherwise ignore current file. Incl
80
91
```
81
92
82
93
### leaveCSSFile(optional)
94
+
83
95
if `true`, it will leave CSS files where they are when inlining
84
96
85
97
### replace(optional)
98
+
86
99
```typescript
87
100
replace?: {
88
101
target:string
89
102
position?:'before'|'after'// default is 'before'
90
103
removeTarget?:boolean// default is false
91
104
}
92
105
```
106
+
93
107
A config for customizing the location of injection, default will add internal style sheet before the `</head>`
108
+
109
+
### attributes(optional)
110
+
111
+
Allows the adding of attributes to the style tag
112
+
113
+
##### example 1
114
+
115
+
```typescript
116
+
...
117
+
newHTMLInlineCSSWebpackPlugin({
118
+
replace: {
119
+
attributes: {
120
+
'type':"text/css"
121
+
},
122
+
},
123
+
}),
124
+
...
125
+
```
126
+
127
+
```html
128
+
<styletype="text/css">
129
+
/* inlined css */
130
+
</style>
131
+
```
132
+
133
+
##### example 2
134
+
135
+
```typescript
136
+
...
137
+
newHTMLInlineCSSWebpackPlugin({
138
+
replace: {
139
+
attributes: {
140
+
'amp-custom':""
141
+
},
142
+
},
143
+
}),
144
+
...
145
+
```
146
+
147
+
```html
148
+
<styleamp-custom="">
149
+
/* inlined css */
150
+
</style>
151
+
```
152
+
153
+
Useful for amp pages
154
+
94
155
#### target
156
+
95
157
A target for adding the internal style sheet
158
+
96
159
#### position(optional)
160
+
97
161
Add internal style sheet `before`/`after` the `target`
162
+
98
163
#### removeTarget(optional)
164
+
99
165
if `true`, it will remove the `target` from the output HTML
166
+
100
167
> Please note that HTML comment is removed by default by the `html-webpack-plugin` in production mode. [#16](https://github.com/Runjuu/html-inline-css-webpack-plugin/issues/16#issuecomment-527884514)
168
+
101
169
##### example
170
+
102
171
```html
103
172
<head>
104
-
<!-- inline_css_plugin -->
105
-
<style>
106
-
/* some hard code style */
107
-
</style>
173
+
<!-- inline_css_plugin -->
174
+
<style>
175
+
/* some hard code style */
176
+
</style>
108
177
</head>
109
178
```
110
179
@@ -118,14 +187,16 @@ if `true`, it will remove the `target` from the output HTML
0 commit comments