nowa-webpack / template-salt

6 stars 3 forks source link

svg图片使用问题 #5

Closed icoreman closed 5 years ago

icoreman commented 5 years ago

image 这个脚手架的webpack.config.js长这个样子。我想使用@svgr/webpack,应该怎么配置啊? test: /.svg$/, use: ['@svgr/webpack'],

没找到脚手架配置的这种方式。

icoreman commented 5 years ago

一样的,还是报错。 events.js:167 throw er; // Unhandled 'error' event ^

TypeError: Cannot read property 'replace' of undefined at C:\Users\Administrator.nowa-gui\installation\node_modules.npminstall_svg2react-loader@1.0.3@svg2react-loader\util\sanitize.js:31:31 at Array.forEach () 报这个,一样的错。 README里面的方法:

项目中使用图标(或图片)

使用图标(svg)

我们推荐使用 svg 作为图标解决方案。

require svg 文件路径将直接返回包含这个 svg 的 react component。


let Star = require('./star.svg');
...
render() {
    return (
        <Star className="star"/>
    );
}
我说之前在哪里看到过svg的使用方法,原来在这里。但是报错啊,是我本地环境的问题么?
icoreman commented 5 years ago

图片问题么,给你看下我的图片。svg不能上传啊,直接复制代码啊: <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543310441017" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4352" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M305.737143 234.544762c10.727619-11.215238 10.727619-28.281905 0-39.009524L256.975238 146.285714c-10.727619-10.727619-28.281905-10.727619-39.497143 0-10.727619 10.727619-10.727619 28.281905 0 39.497143l49.249524 49.249524c10.727619 10.727619 28.281905 10.727619 39.009524-0.487619zM512 144.822857H513.462857c14.628571 0 26.819048-11.702857 26.819048-26.331428V53.150476c0-14.628571-10.727619-27.306667-25.356191-28.769524-16.579048-1.462857-30.232381 11.215238-30.232381 27.794286v66.316191c0 14.628571 12.190476 26.331429 26.819048 26.331428h0.487619zM806.521905 185.782857c10.727619-10.727619 10.727619-28.281905 0-39.497143-10.727619-10.727619-28.281905-10.727619-39.497143 0l-49.249524 49.249524c-10.727619 10.727619-10.727619 27.794286-0.487619 38.521905l0.487619 0.487619c10.727619 11.215238 28.281905 11.215238 39.009524 0.487619l49.737143-49.249524zM219.428571 452.510476c0-7.801905 0.487619-15.11619 0.975239-22.918095 0.487619-9.264762-6.339048-17.066667-15.60381-17.066667H123.367619c-15.60381 0-28.281905 12.678095-27.794286 28.281905 0.487619 15.11619 13.653333 26.819048 28.769524 26.819048h78.994286c8.777143 0.975238 16.091429-6.339048 16.091428-15.116191zM900.632381 413.013333H819.2c-9.264762 0-16.579048 7.801905-15.60381 17.066667 0.487619 7.314286 0.975238 15.11619 0.975239 22.430476 0 8.777143 6.826667 15.60381 15.603809 15.60381h80.457143c15.60381 0 27.794286-12.190476 27.794286-27.794286 0-14.628571-12.678095-27.306667-27.794286-27.306667zM732.891429 665.112381c-0.487619 0-0.487619 0.487619 0 0-9.264762 11.215238-8.777143 27.306667 1.462857 37.059048l32.670476 33.158095c10.727619 10.727619 28.281905 10.727619 39.497143 0 10.727619-10.727619 10.727619-28.281905 0-39.497143l-32.670476-33.158095c-11.702857-11.215238-30.72-10.24-40.96 2.438095zM217.478095 696.32c-10.727619 10.727619-10.727619 28.281905 0 39.497143 10.727619 10.727619 28.281905 10.727619 39.497143 0l33.158095-33.158095c9.752381-9.752381 10.727619-25.84381 1.950477-37.059048 0 0 0-0.487619-0.48762-0.487619-10.24-12.678095-29.257143-13.653333-40.47238-1.950476l-33.645715 33.158095zM766.049524 452.510476c0-57.539048-19.017143-110.689524-51.687619-153.6-28.281905-37.546667-66.80381-66.80381-111.664762-83.870476l0.487619-1.462857-19.017143-5.851429c-14.628571-4.388571-30.232381-7.314286-45.83619-8.777143l-2.438096-0.487619h0.487619c-7.801905-0.975238-15.60381-1.462857-23.893333-1.462857h-1.462857c-8.289524 0-16.091429 0.487619-23.893333 1.462857l-2.438096 0.487619c-15.60381 1.462857-30.72 4.388571-45.348571 8.777143l-18.529524 5.36381 0.487619 1.462857c-44.860952 17.066667-83.382857 46.811429-112.152381 84.358095-32.182857 42.910476-51.2 96.060952-51.2 153.6 0 41.447619 7.314286 75.093333 18.041905 103.375238 16.579048 41.935238 41.935238 70.704762 62.415238 92.16 10.24 10.727619 19.017143 19.992381 25.356191 27.794286 6.339048 7.801905 9.264762 14.140952 10.24 19.017143 4.388571 23.405714 4.87619 53.150476 4.87619 60.952381v1.950476c0 34.133333 27.794286 61.44 61.44 61.44h142.384762c34.133333 0 61.44-27.794286 61.44-61.44v-1.950476c0-7.314286 0.487619-37.059048 4.87619-60.952381 0.487619-3.413333 1.950476-6.826667 4.876191-11.702857 4.87619-7.801905 14.140952-18.041905 25.35619-29.744762 17.066667-18.041905 39.009524-40.472381 56.076191-72.655238 18.529524-32.182857 30.72-74.118095 30.72-128.24381z m-58.026667 87.771429c-13.653333 34.620952-34.133333 57.539048-53.638095 78.506666-9.752381 10.24-19.504762 19.992381-27.794286 30.72-8.289524 10.727619-15.60381 22.430476-18.529524 37.546667-5.36381 28.769524-5.851429 59.977143-5.851428 68.754286v1.950476c0 10.24-8.289524 18.529524-18.529524 18.529524H440.807619c-5.36381 0-9.752381-1.950476-13.165714-5.36381-3.413333-3.413333-5.36381-7.801905-5.36381-13.165714v-1.950476c0-8.777143-0.487619-39.984762-5.851428-68.754286-1.950476-9.752381-5.851429-18.529524-10.727619-26.331428-8.777143-13.653333-19.504762-24.868571-30.72-37.059048-17.066667-18.041905-35.108571-37.059048-49.249524-63.390476-14.140952-26.331429-24.380952-59.977143-24.380953-107.76381s16.091429-92.16 42.910477-127.268571c26.819048-35.59619 64.853333-62.415238 108.251428-75.093334l5.36381-1.462857c10.727619-2.925714 21.455238-4.87619 32.182857-5.851428l1.950476-0.487619c6.339048-0.487619 12.678095-0.975238 19.017143-0.975238h1.950476c6.339048 0 12.678095 0.487619 19.017143 0.975238l1.950476 0.487619c11.215238 0.975238 21.942857 3.413333 32.182857 5.851428l5.36381 1.462857c43.885714 13.165714 81.432381 39.984762 108.251428 75.093334s42.422857 79.481905 42.422858 127.268571c0.975238 36.571429-5.36381 64.853333-14.140953 87.771429zM582.704762 836.266667h-141.409524c-14.628571 0-26.331429 11.702857-26.331428 26.331428 0 14.628571 11.702857 26.331429 26.331428 26.331429h141.409524c14.628571 0 26.331429-11.702857 26.331428-26.331429 0-14.628571-11.702857-26.331429-26.331428-26.331428zM582.704762 903.558095h-141.409524c-14.628571 0-26.331429 11.702857-26.331428 26.331429 0 14.628571 11.702857 26.331429 26.331428 26.331428h141.409524c14.628571 0 26.331429-11.702857 26.331428-26.331428 0-14.628571-11.702857-26.331429-26.331428-26.331429zM524.190476 970.849524H451.535238v2.438095c0 14.628571 22.430476 26.331429 43.398095 26.331429h34.620953c20.967619 0 43.398095-11.702857 43.398095-26.331429v-2.438095h-48.761905z" fill="" p-id="4353"></path></svg>

icoreman commented 5 years ago

不行,删除了重新安装、重置都试了,依然是报错这个svg2react-loader的错。 @gbk 哪里的问题呢?是不是需要配置下?

gbk commented 5 years ago

把 svg 里面的 空 style 标签删掉就好了

icoreman commented 5 years ago

空 style 标签

...就是这个问题了。我佛了

icoreman commented 5 years ago

把 svg 里面的 空 style 标签删掉就好了

感谢,这个问题困扰我好几天了。 相反的,这个问题是不是算作这个框架的bug呢。对字符串操作也不进行下判空。恶心心。

gbk commented 5 years ago

@icoreman loader 的问题已修复了,需要重新安装 nowa-build

icoreman commented 5 years ago

@icoreman loader 的问题已修复了,需要重新安装 nowa-build

谢谢啊