Wepack url-loader игнорирует CSS фонов - PullRequest
0 голосов
/ 28 января 2020

Я пытаюсь использовать url-loader для преобразования URL-адресов файлов во встроенные URL-адреса данных для моих CSS фонов. Когда я запускаю команду сборки, она генерирует файлы CSS & JS без каких-либо ошибок, но URL-адреса фонового изображения остаются неизменными в выводе CSS.

Вот мой конфиг веб-пакета:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const ManifestPlugin = require('webpack-manifest-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = (env, argv) => ({
    entry: {
        app: ['./app/Resources/js/app.js', './app/Resources/scss/app.scss']
    },
    output: {
        path: path.join(__dirname, "/web/build"),
        filename: argv.mode === 'production' ? '[name].[hash].js' : '[name].js'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorPluginOptions: {
                    preset: ['default', { discardComments: { removeAll: true } }],
                },
            })
        ]
    },
    devServer: {
         contentBase: './web',
         port: 9000,
         disableHostCheck: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                },
                resolve: {
                    extensions: ['.js']
                }
            },
            {
                test: /\.scss$/,
                resolve: {
                    extensions: ['.scss']
                },
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sassOptions: {
                                outputStyle:  'expanded',
                                includePaths: ['./node_modules/foundation-sites/scss']
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        },
                    }
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: argv.mode === 'production' ? '[name].[contenthash].css' : '[name].css'
        }),
        new ManifestPlugin(),
        new CleanWebpackPlugin()
    ],
});

My CSS - это просто стандартный файл S CSS:

.icon { background:url('path/to/icon.svg'); }

В конечном выводе я ожидаю, что path/to/icon.svg будет заменен URL-адресом данных. Что я делаю не так?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...