Svg-sprite-loader is used in laravel-mix to deal with SVG icons. How to modify the original default configuration in mix?

Overview

I want to use the svg-sprite-loader package to handle the SVG icon, referring to vue-element-admin/./index.js on Github.

question

I follow the teacher"s tutorial Portal to configure webpack.

.

clipboard.png

but found that looking at the default module rules configuration of Laravel-mix (path: node_modules/laravel-mix/src/builder/webpack-rules.js), Line:11-73 has: 

rules.push({
    // only include svg that doesn"t have font in the path or file name by using negative lookahead
    test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
    loaders: [
         {
             loader: "file-loader",
             ......
         }
    ]
});
// Add support for loading fonts.
rules.push({
    test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
    loader: "file-loader",
    .....
});

ask for advice

  1. is there a way to modify only the module.rules based on the original webpack configuration of Laravel-mix?
  2. or create a new webpack config? that is compatible with the original code without the configuration of laravel-mix
Svg laravel php
Mar.21,2021

I also encountered the same problem as the landlord, which has now been solved. Just add the following configuration to webpack.mix.js : 



webpackConfig:


mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.(woff2?|ttf|eot|svg|otf)$/,
                loader: 'file-loader',
                options: {
                    name: '../fonts/[name].[ext]?[hash]',
                    publicPath: '../foo/bar' // 
                }
            }
        ]
    }
});


 Don't forget to remove -- config=node_modules/laravel-mix/setup/webpack.config.js  
 from  package.json .

Previous: How is it that the properties under vue this can't be passed?

Next: How to batch add? many-to-many fields by Django

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b34bc1-2bf2f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b34bc1-2bf2f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?