CODEWITHSUNDEEP
cssimagebuildbase64webpack
ksharifbd
ksharifbd

Reputation: 5262

How to process base64 image in webpack?

I'm using webpack in my project. I'm trying to use toastr

Toastr css file uses base64 in url like the following:

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

The following is my webpack configuration:

'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")
]
}

When I run webpack in terminal I get the error

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)

How can I process base64 url with webpack?

Upvotes: 3

Views: 4126

Answers (1)

ksharifbd
ksharifbd

Reputation: 5262

This problem is solved.

I was excluding node_modules. Since the css-loader is configured to exclude node_modules, it was not able to process the toastr.css file. Just eliminate the exclude: /node_modules/.

The correct configuration in this case is the following:

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

Upvotes: 2

Related Questions