svg - css中的webpack相对url，创建复制的导出svg文件

Question

我有以下 webpack.config。我试图在我的 style.css 中使用相对 url 来指向一些 svg 文件。问题是相对 url 引用了 svg 文件的副本，这只是一个导出语句。有谁知道为什么我的 webpack.config 会创建这些复制的 svg 文件？这些文件无法显示图像，但原始 svg 可以，因此只是试图让 webpack 停止创建复制的导出文件并仅引用实际的 svg。谢谢。

webpack.config.cs：

const path = require('path');
const webpack = require('webpack');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require("vue-loader");

const srcPath = path.resolve(__dirname, './src');
const stylePath = path.resolve(srcPath, './styles');
const bldPath = path.resolve('../SpeedRunApp/wwwroot/dist');

module.exports = {
    devtool: 'source-map',
    entry: {
        master: path.resolve(srcPath, 'index.js'),
        style: `${stylePath}/style.css`
    },
    mode: 'development',
    watch: true,
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [{ loader: 'style-loader' },
                      { loader: 'css-loader' },
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    plugins: [ require('autoprefixer') ]
                                    }
                                }                       
                        },
                    { loader: 'sass-loader' }]
            },
            {
                exclude: /(node_modules|bower_components)/,
                include: srcPath,
                test: /\.js$/,
                use: [{ loader: 'babel-loader' }]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            publicPath: './fonts/',
                            outputPath: './fonts/',
                            esModule: false
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: './images/',
                            publicPath: './images/',
                            esModule: false
                        }
                    }
                ]
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    chunks: 'all',
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/
                }
            }
        },
    },
    output: {
        filename: '[name].min.js',
        chunkFilename: '[name].min.js',
        globalObject: 'this',
        path: `${bldPath}`,
        publicPath: '/dist/'
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [`${bldPath}/**`],
            dry: false,
            verbose: true,
            dangerouslyAllowCleanPatternsOutsideProject: true
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].min.css'
        })
    ]
};

样式.css：

.twitter-logo {
    background: url(../fonts/Twitter_Logo_WhiteOnBlue.svg)
}

.twitch-logo {
    background: url(../fonts/TwitchGlitchPurple.svg)
}

.youtube-logo {
    background: url(../fonts/youtube_social_square_red.svg)
}

webpack 正在创建的奇怪的复制文件：

复制文件的内容：

标签： svgwebpackwebpack-file-loader

Answer 1

我放弃了使用 css，只是导入了 svgs，将代码更改为此并工作。我将我自己的非 fontawesome svgs 放在 Node.js 项目（webpack 项目）的“字体”文件夹中，并且正确地将它们复制到 Web MCV 项目中的静态字体文件夹中。

索引.js

import '@fortawesome/fontawesome-free/js/all.min.js'
import './fonts/TwitchGlitchPurple.svg';
import './fonts/Twitter_Logo_WhiteOnBlue.svg';
import './fonts/youtube_social_square_red.svg';
import './fonts/pie-chart.svg';

Node.js (webpack) 项目：

成功复制到 Web.MVC 项目中的静态文件夹：

使用 svg 的代码：