如何从MDL得到的SVG的WebPack

Question

工作使用CheckBox组件的形式材质设计精简版，即 https://getmdl.io/components/index.html#toggles-section/checkbox

的tickmark.svg不能正常显示，当我使用

import '../../node_modules/material-design-lite/src/material-design-lite.scss'; 

与NPM捆绑和webpack。相反的：

我得到：

在我发现下面的路径tickmark.svg这是作为SVG浏览器的 '缺失'：

当使用这两个替代方案中的任何一个时，它的工作原理如下应： 1）import '../../node_modules/material-design-lite/.tmp/material-design-lite.css'; 2）import '../../node_modules/material-design-lite/material.min.css';

比较，使用2我获得以下的浏览器的时候：

我webpack.config.js：

var path = require('path'); 
var webpack = require('webpack'); 
var BundleTracker = require('webpack-bundle-tracker'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var Clean = require('clean-webpack-plugin'); 
var bootstrapPath = path.join(__dirname, 'node_modules/bootstrap/dist/css'); 
var sourcePath = path.join(__dirname, 'assets'); 

module.exports = { 
    devtool: 'eval-source-map', 
    context: __dirname, 
    entry: [ 
     './assets/js/index' // entry point of our app. .assets/js/index.js should require other js modules and dependencies it needs 
    ], 
    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: '[name]-[hash].js', 
    } 
    , 
    node: { 
     console: true, 
     fs: 'empty' 
    } 
    , 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery' 
     }), 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.BannerPlugin('Pqbq Banner!!!! todo'), 
     new HtmlWebpackPlugin({ 
      template: __dirname + '/assets/index.tmpl.html' 
     }), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new Clean(['assets/bundles']) 
    ], 
    module: { 
     preloaders: [ 
      { 
       test: /\.js/, 
       loader: 'eslint' 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.js[x]?$/, 
       loader: 'babel', 
       exclude: /(node_modules|bower-components)/, 
       query: { 
        presets: ['es2015', 'stage-0'] 
       } 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { 
       test: /\.js$/, 
       include: path.resolve(__dirname, 'node_modules/mapbox-gl/js/render/shaders.js'), 
       loader: 'transform/cacheable?brfs' 
      }, 
      { 
       test: /\.js$/, 
       include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), 
       loader: 'worker' 
      }, 
      // { 
      //  test: /\.css$/, 
      //  loader: 'style!css?modules!postcss' 
      // }, 
      { 
       test: /\.scss$/, 
       loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
      }, 
      // {test: /\.(woff2?|svg)$/, loader: 'url?limit=10000'}, 
      // {test: /\.(ttf|eot)$/, loader: 'file'}, 
      {test: /\.css$/, loader: 'style-loader!css-loader'}, 
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
      {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'}, 
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
      // {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 
      {test: /\.svg$/, loader: 'url?limit=8192!svgo'}, 
     ] 
    } 
    , 
    postcss: [ 
     require('autoprefixer') 
    ], 
    resolve: { 
     modulesDirectories: ['node_modules', 'bower_components', bootstrapPath, sourcePath], 
     extensions: ['', '.js', '.jsx', '.css'], 
     alias: { 
      webworkify: 'webworkify-webpack', 
      '$': 'jquery', 
      'jQuery': 'jquery' 
     } 
    } 
    , 
    devServer: { 
     contentBase: './assets', 
     colors: true, 
     historyApiFallback: true, 
     inline: true, 
     hot: true 
    } 
}; 

Answer 1

为了解决这个问题，我不得不通过创建我自己的material.scss文件来覆盖$ image_path变量。我抓住这个文件：

https://github.com/google/material-design-lite/blob/master/src/material-design-lite.scss

，然后补充说：

@import "./variables"; 

在顶部。

在该文件中添加此行：问题的

$image_path: '~material-design-lite/dist/images/' !default;