微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用html-inline-css-webpack-plugin从样式表内嵌具有适当样式的所有html标签

如何解决使用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 举报,一经查实,本站将立刻删除。