Wie base64 Image im Webpack verarbeiten?

Ich verwende Webpack in meinem Projekt. Ich versuche toastr Wie base64 Image im Webpack verarbeiten?

Toastr CSS-Datei zu verwenden, verwendet base64 in URL wie folgt aus:

#toast-container > .toast-success { 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;}

Das Folgende ist meine webpack Konfiguration:

'use strict' 

var webpack = require('webpack'); 
var path = require('path'); 
var extractTextWebpackPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
devtool: 'cheap-module-eval-source-map', 
entry: [ 
    './modules/index.js' 
], 
output: { 
    path: path.join(__dirname, 'public'), 
    filename: 'bundle.js' 
}, 
module: { 
    noParse: [ 
     /aws\-sdk/, 
    ], 
    loaders: [{ 
      test: /\.css$/, 
      exclude: /node_modules/, 
      include: path.resolve(__dirname, 'public/stylesheet'), 
      loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader') 
     }, 

     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      include: __dirname, 
      loaders: ['babel'] 
     }, 
     { 
      test: /\.(png|jpg|svg)$/, 
      exclude: /node_modules/, 
      loader: 'url-loader?limit=2000', 
      include: [ 
       path.resolve(__dirname, 'public') 
      ] 
     } 
    ] 
}, 
plugins: [ 
    new extractTextWebpackPlugin("styles.css") 
] 
}

Als ich webpack in Terminal I laufen Erhalten Sie den Fehler

ERROR in ./~/toastr/build/toastr.css 
Module parse failed: /Users/Admin/Downloads/kamal/development/client-app/node_modules/toastr/build/toastr.css Unexpected token (1:0)

Wie kann ich Base64 URL mit Webpack verarbeiten?

Quelle

2016-09-18 ksharifbd

Ich denke, das Ding Toaster einige besondere CSS-Loader benötigt. Und vielleicht fehlt es in seinem eigenen Paket.json. Versuchen Sie, es in die Abhängigkeiten Ihres Pakets zu integrieren.jsons "css-loader" n und versuchen Sie es. –

@FaisalMushtaq Ich habe 'css-loader' und' style-loader' in der dev-Abhängigkeit von package.json. Aber immer noch den Fehler zu bekommen. – ksharifbd

@FaisalMushtaq Danke. Das Problem ist gelöst. Ich habe node_modules ausgeschlossen. Ich habe die erforderlichen Dateien zum Includes-Array hinzugefügt. – ksharifbd

Dieses Problem ist gelöst.

Ich war ausgeschlossen node_modules. Da der css-loader so konfiguriert ist, dass er Knotenmodule ausschließt, konnte er die Datei toastr.css nicht verarbeiten. Beseitigen Sie einfach die exclude: /node_modules/.

Die richtige Konfiguration in diesem Fall ist die folgende:

loaders: [{ 
     test: /\.css$/, 
     include: path.resolve(__dirname, 'public/stylesheet'), 
     loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader') 
    },

Quelle

2016-09-29 04:44:22 ksharifbd

Wie base64 Image im Webpack verarbeiten?

Antwort

Verwandte Themen