Question

我无法使用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 /组件/ 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']
  }
};

Answer 1

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

{ 测试：/。svg /，采用： { loader：“ svg-url-loader”，选项：{ 限制：10000000 } } }

SVG不使用webpack 2和url loader

1 个答案: