不能包含通過webpack從節點模塊目錄中的CSS加載的png和svg文件

我使用的模塊名爲React-Photoswipe，它要求我在node_module文件夾中導入包含PNG和SVG的CSS文件：不能包含通過webpack從節點模塊目錄中的CSS加載的png和svg文件

我的import語句：

import { PhotoSwipe } from 'react-photoswipe'; 
import 'photoswipe/dist/photoswipe.css'; 
import 'photoswipe/dist/default-skin/default-skin.css';

在默認skin.css：

.pswp__button--arrow--right:before { 
    background: url(default-skin.png) 0 0 no-repeat; 
    background-size: 264px 88px; 
    width: 44px; 
    height: 44px; }

在我的WebPack，我有PNG裝載機（其他PNG文件加載好嗎）：

const path = require('path'); 
const webpack = require('webpack'); 
const autoprefixer = require('autoprefixer'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    'react-hot-loader/patch', 
    './src/index', 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/', 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
    resolve: { 
    root: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    extensions: ['', '.js', '.json', 'css', 'svg', 'png', 'gif'], 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.js/, 
     loader: 'eslint', 
     }, 
    ], 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'src'), 
     }, 
     { 
     test: /\.css/, 
     loaders: [ 
      'style', 
      'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
      'postcss', 
     ], 
     }, 
     { 
     test: /\.(png|jpg|svg|gif)/, 
     loaders: [ 
      'url?limit=10000&hash=sha512&digest=hex&name=[name]_[hash].[ext]', 
     ], 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2|otf)$/, 
     loader: 'file?name=public/fonts/[name].[ext]', 
     }, 
    ], 
    }, 
    postcss:() => [autoprefixer], 
};

這裏有錯誤，我遇到的問題：

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-ski 
n.css 
Module not found: Error: Cannot resolve module 'default-skin.png' in C:\xampp\htdocs\react-forge-landing-gh-pages\node_modules\photoswipe\dist\default-skin 
@ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-skin.css 
6:1455-1482 

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-ski 
n.css 
Module not found: Error: Cannot resolve module 'default-skin.svg' in C:\xampp\htdocs\react-forge-landing-gh-pages\node_modules\photoswipe\dist\default-skin 
@ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-skin.css 
6:2093-2120 

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-ski 
n.css 
Module not found: Error: Cannot resolve module 'preloader.gif' in C:\xampp\htdocs\react-forge-landing-gh-pages\node_modules\photoswipe\dist\default-skin 
@ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-skin.css 
6:9039-9063

來源

2016-06-19 MCSLI

錯誤字面上說，url(default-skin.png)不能解決任何事情的WebPack是知道的。

您可以嘗試針對該特定文件（別名default-skin.png明確指向該文件）定義resolve.alias。

來源

2016-06-19 06:27:34

不能包含通過webpack從節點模塊目錄中的CSS加載的png和svg文件

回答

相關問題