WebPack加载器生成没有CSS文件的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));

其中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.tssvg文件，第1部分（生成SVG精灵）是：

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

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

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

---

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

谢谢。