使用WebPack从几个SVG文件创建SVG Sprite文件

Question

我使用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));

其中compilerOptions表示svgSprite可用的选项。

我尝试了几个approches，但我几乎没有怀疑我做错了什么（或者误用了我试过的工具）。

我主要查看了https://github.com/kisenka/svg-sprite-loader/，其中有一个简单的用例：

• “./ img / icons / icon-1.svg”必须移至“./build/img/sprints.svg”
• 必须创建一个CSS文件才能在精灵文件中使用图标。
• 文件夹“./img/icons”可以包含很多svgs。

关于svg我的webpack.config.ts文件的第1部分（SVG sprite生成）是：

 module: {
           rules: [
               {
                   test: /\.svg$/,
                   loader: 'svg-sprite-loader',
                   options: {
                       extract: true,
                       spriteFilename: 'sprite.svg'
                   }
               }, {...}] ...

我没有指定特定的“条目”或“输出”，也没有在svg文件上使用“ExtractTextPlugin”。

关于第2部分（CSS文件），我不知道如何从中生成CSS文件。

如何使用Webpack生成Sprite文件？ 如何生成“双胞胎”CSS文件？

谢谢。