SVG 不适用于 webpack 2 和 url 加载器答案

【问题标题】：SVG not working with webpack 2 and url loaderSVG 不适用于 webpack 2 和 url 加载器
【发布时间】：2017-09-28 19:24:22
【问题描述】：

我无法使用 webpack 2 制作 svg-s。当 bundle 被编译时，我收到一个警告，当我加载页面时，svg-s 没有显示出来。我猜我的 webpack 2 配置正在工作（尽管目前很混乱），因为 png-s 和 jpg-s 已正确加载。

错误：

WARNING in ./src/assets/wheels/19.svg
(Emitted value instead of an instance of Error)   resolve-url-loader 
 cannot operate: CSS error
 /Users/asilo/Desktop/js/react/react-tesla-range-
 calculator/src/assets/wheels/19.svg:1:83: missing '{'
 at error (/Users/silo/Desktop/js/react/react-tesla-range-
 calculator/node_modules/css/lib/parse/index.js:62:15)

src/components/TeslaWheels/TeslaWheels.js

import './TeslaWheels.css';
.......
<label className="tesla-wheels__item tesla-wheels__item--19"

src/componentes/TeslaWheels/TeslaWheels.css

.tesla-wheels__item--19 {
  background-image: url(../../assets/wheels/19.svg);
}

webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
  path: __dirname,
  publicPath: '/',
  filename: 'bundle.js'
},
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use : [
        {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react', 'stage-1']
          }
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        }
      ]
    },
    {
      test: /\.svg$/,
      exclude: /node_modules/,
      include: path.resolve(__dirname, 'src'),
      use: [
        {
          loader: 'svg-inline-loader',
          options: {
            query: {
              classPrefix: true,
              idPrefix: true
            }
          }
        },
        {
          loader: 'resolve-url-loader',
          options: {
            query: {
              publicPath: 'http://localhost:8080/'
            }
          }
        }
      ]
    },
    { 
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            query: {
              limit: 10000,
              mimetype: 'application/font-woff'
            }
          }
        }
      ]
    },
    { 
      test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: [
        'file-loader'
      ]
    },
    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            query: {
              publicPath: 'http://localhost:8080/',
              useRelativePath: true
            }
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            query: {
              bypassOnDebug: true,
              optiping: {
                optimizationLevel: 7
              },
              gifsicle: {
                interlaced: true,
              }
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

【问题讨论】：

assets 文件夹在 src 文件夹中吗？请检查一次。
是的，资产在 src 中。 Png-s 也在那里，并且已正确加载。

标签： css reactjs svg webpack webpack-style-loader

【解决方案1】：

使用 svg-url-loader 。它将解决您的问题。我有同样的问题，我调试并发现 url-loader 是 svg 的损坏数据 uri，我不知道为什么。但是 svg-url-loader 解决了我的问题。使用具有以下配置的 svg-url-loader 将解决问题：

{ 测试：/.svg/，采用： { 加载器：'svg-url-loader', 选项： { 限额：10000000 } } },

【讨论】：