如何解决使用html-inline-css-webpack-plugin从样式表内嵌具有适当样式的所有html标签
由于smtp客户端的限制,为了从我开发的应用程序发送电子邮件, 我想使用Webpack在我的最终html模板中的每个标签中内联CSS中的每个样式类。就我而言,我可以在一个div中内联所有样式表,但我的目标是使样式的每个标签都填充有适当的样式。
这是我的webpack.config:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
module.exports = {
mode: 'development',entry: [
'./src/main.js',],plugins: [
new CleanWebpackPlugin(),new MiniCssExtractPlugin({
filename: '[name].css',}),new HtmlWebpackPlugin({
filename: 'review.html',template: './src/templates/models/review.pug',new HtmlWebpackPlugin({
filename: 'access_request.html',template: './src/templates/models/domain_access_request.pug',new HtmlWebpackPlugin({
filename: 'analytics_alert.html',template: './src/templates/models/analytics_alert.pug',new HtmlWebpackPlugin({
filename: 'battery_pb.html',template: './src/templates/models/battery_pb.pug',new HtmlWebpackPlugin({
filename: 'deco_module_cloud.html',template: './src/templates/models/deco_module_cloud.pug',new HtmlWebpackPlugin({
filename: 'stock_pb.html',template: './src/templates/models/stock_pb.pug',new HTMLInlineCSSWebpackPlugin({
replace: {
target: 'tbody',removeTarget:true
}
}),output: {
filename: '[name].js',path: path.resolve(__dirname,'dist'),},module: {
rules: [
{
test: /\.scss$/i,use: [
MiniCssExtractPlugin.loader,{
loader: 'css-loader',{
loader: 'sass-loader'
}
],{
test: /\.css$/,options: {
sourceMap: true,minimize: true,includePaths: [
path.resolve(__dirname,'./src/templates/assets/scss')
]
}
},{
test: /\.pug$/,use: [
'pug-loader'
],{
test: /\.(png|svg|jpg|gif)$/,use: [
'file-loader',};
希望您理解我的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。