使用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 (将#修改为@）