webpackでbase64イメージを処理する方法は？

私は自分のプロジェクトでwebpackを使用しています。私はcssファイルToastr toastr webpackでbase64イメージを処理する方法は？

を使用しようとしていることのようなURLでBASE64を使用して、次の

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

され、次の私のWebPACK構成：

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

私は、端末Iでwebpackを実行しますエラーを取得する

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)

webpackでbase64のURLを処理できますか？

出典

2016-09-18 ksharifbd

私はこの事のトースターは、いくつかの特定のCSSローダーを必要とすると思います。そして、それはそれ自身のpackage.jsonに欠けているかもしれません。それをあなたのpackage.jsonのdev依存関係 "css-loader" nに追加してみましょう。 –

@FaisalMushtaq私は 'css-loader'と' style-loader'をpackage.jsonのdevに依存しています。しかし、まだエラーを取得します。 @FaisalMushtaqおかげさまで – ksharifbd

問題は解決されました。私はnode_modulesを除外していました。インクルード配列に必要なファイルを追加しました。 – ksharifbd

この問題は解決されました。

私はnode_modulesを除外していました。 css-loaderはnode_modulesを除外するように設定されているため、toastr.cssファイルを処理できませんでした。 exclude: /node_modules/を削除するだけです。

この場合、正しい構成は以下の通りです：

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

出典

2016-09-29 04:44:22 ksharifbd

webpackでbase64イメージを処理する方法は？

答えて

関連する問題