1

我在以下问题上苦苦挣扎，不胜感激......！

我尝试使用 Laravel Mix (v5.0.4) 并使用 SVG sprite loader ( svg-sprite-loader ) 对其进行扩展以生成 SVG sprite。我有以下文件夹结构：

resources/
  images/
    image.jpg
  sass/
    app.scss
  svg/
    file1.svg
    file2.svg

webpack.sprite.js
webpack.mix.js

的内容webpack.mix.js：

const mix = require('laravel-mix');
require('./webpack.sprite');

const toCss = 'public/css';

mix.sass('resources/sass/app.scss', toCss)
   .options({
       sassOptions: {
           outputStyle: 'nested',
       }
   })
   .sprite();

的内容webpack.sprite.js：

const mix = require('laravel-mix');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const path = require('path');

class Sprite {
    dependencies() {
        return ['svg-sprite-loader'];
    }

    webpackPlugins() {
        return new SpriteLoaderPlugin({plainSprite: true});
    }

    webpackRules() {
        return {
            test: /\.svg$/,
            include: path.resolve(__dirname, 'resources', 'svg'),
            use: [
                {
                    loader: 'svg-sprite-loader',
                    options: {
                        extract: true,
                        spriteFilename: path.resolve(__dirname, 'resources', 'images') + 'sprite.svg',
                        runtimeCompat: true
                    }
                },
                'svg-transform-loader',
                'svgo-loader'
              ]
        };
    }
}

mix.extend('sprite', new Sprite());

它对精灵没有任何作用，但它从 SASS 生成 CSS！:(我不知道为什么...尝试在扩展程序中使用一些console.log（）“调试”它并被击中，我在控制台中看到了日志消息。但是没有生成精灵。

我还尝试在扩展中使用硬编码的相对路径，而不使用path. 没有帮助。

任何想法？

提前致谢！

4

1 回答 1

0

我感觉这与 Webpack5 的新 Asset 模块有关。

https://webpack.js.org/guides/asset-modules/

对于要写入磁盘的资产，或者可能准备移交给大型插件，您现在需要指定资产类型和生成器，以便为这些资产定义最佳文件名。

webpackRules() {
    return {
        test: /\.svg$/,
        include: path.resolve(__dirname, 'resources', 'svg'),
        type: 'asset/resource',
        generator: {
          'filename': '[name][ext]'
        },      
        use: [
            {
                loader: 'svg-sprite-loader',
                options: {
                    extract: true,
                    spriteFilename: path.resolve(__dirname, 'resources', 'images') + 'sprite.svg',
                    runtimeCompat: true
                }
            },
            'svg-transform-loader',
            'svgo-loader'
          ]
    };
}

如果仍然没有运气，请尝试使用替代插件： https ://www.npmjs.com/package/webpack-svg-spritely

于 2022-01-21T18:35:04.833 回答