作者:鱼儿什么都知道丶 | 来源:互联网 | 2023-01-07 18:43
我使用gulp-svg-sprites将多个SVG转换为一个大的Sprite,并且除了在文件中生成符号和适当的CSS选择器外。
出于架构更改的目的,我正在Webpack 3上迁移所有gulp进程。要用Webpack复制,我无法实现的最后一件事是SVG Sprite生成。
使用Gulp-svg-sprites,脚本为:
var thisPipe = gulpSrc(svgSrc)
.pipe(svgSprite(config.svgSprites.compilerOptions))
.pipe(gulp.dest(svgDest));
其中compileOptions代表svgSprite可用的选项。
我尝试了几种方法,但几乎不怀疑自己做错了什么(或滥用了尝试的工具)。
我主要看了https://github.com/kisenka/svg-sprite-loader/,有一个简单的用例:
./img/icons/icon-1.svg
必须移至 ./build/img/sprints.svg
必须创建CSS文件才能在Sprite文件中使用图标。
文件夹“ ./img/icons”可以包含很多svg。
关于我的webpack.config.ts
svg文件,第1部分(生成SVG精灵)是:
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'sprite.svg'
}
}, {...}] ...
我没有指定特定的“入口”或“输出”,也没有ExtractTextPlugin
在svg文件上使用。
关于第2部分(CSS文件),我不知道如何从中生成CSS文件。
如何使用Webpack生成Sprite文件?
如何生成“双胞胎” CSS文件?
谢谢。