首页 文章

不能包含通过webpack从节点模块目录中的CSS加载的png和svg文件

提问于
浏览
0

我正在使用一个名为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 回答

  • 1

    错误字面上说 url(default-skin.png) 没有解决任何webpack意识到的问题 .

    您可以尝试针对该特定文件定义resolve.alias(别名 default-skin.png 以明确指向该文件) .

相关问题