我正在使用一个名为React-Photoswipe的模块,它要求我在node_module文件夹中导入包含PNG和SVG的CSS文件:
我的进口声明:
import { PhotoSwipe } from 'react-photoswipe';
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';
在default-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
1 回答
错误字面上说
url(default-skin.png)
没有解决任何webpack意识到的问题 .您可以尝试针对该特定文件定义resolve.alias(别名
default-skin.png
以明确指向该文件) .