webpack relative url in css, creating copied export svg files

Question

I have the below webpack.config. I'm trying to use relative url in my style.css to point to some svg files. The problem is the relative url is referencing a copy of the svg file which is just an export statement. Does anyone know why my webpack.config is creating these copied svg files? The files aren't working to show the image but the original svg does, so just trying to get webpack to stop creating the copied export file and just reference the actual svg. Thanks.

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'
        })
    ]
};

style.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)
}

Weird copy files webpack is creating:

Content of copied files:

score 0 · Accepted Answer · answered Sep 07 '21 at 20:44

I bailed on using the css and just went with importing the svgs, changed code to this and works. I put my own non-fontawesome svgs in the "font" folder in the Node.js project (webpack project) and that is correctly copying them to the static font folder in the Web MCV project.

Index.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) project:

Successful copy to static folder in Web.MVC project:

Code using svg:

webpack relative url in css, creating copied export svg files

1 Answers1