javascript – How to use raw-loader and file-loader together?

I have a button for plugin after pressing that button, the cursor changes style to given SVG in my css file. So I try to use npm run build build file on local server to test it, I get the error below shown.

errors in the console

GET http://127.0.0.1:5500/packages/ckeditor5-build-decoupled-document/theme/icons/apply-format.svg 404 (Not Found)

when *.js file imports an SVG file, I use raw-loader
when *.css file imports the SVG file, I use file-loader or url-loader (webpack 4).

tree structure

../ckeditor5-copy-format/
├── ckeditor5-metadata.json
├── package.json
├── src
│   ├── copyformatcommand.js
│   ├── copyformatediting.js
│   ├── copyformat.js
│   ├── copyformatui.js
│   └── index.js
├── theme
│   ├── icons
│   │   └── apply-format.svg
│   └── style.css

style.css

.apply-copy{
    cursor: url('../theme/icons/apply-format.svg'),copy;
}

so i want to use file loader or url loader to get this url from the specific css file above and not all the others *.css files.

webpack.config.js(web package 4)

const path = require( 'path' );
const webpack = require( 'webpack' );
const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );

module.exports = {
    devtool: 'source-map',
    performance: { hints: false },

    entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),

    output: {
        // The name under which the editor will be exported.
        library: 'DecoupledEditor',

        path: path.resolve( __dirname, 'build' ),
        filename: 'ckeditor.js',
        libraryTarget: 'umd',
        libraryExport: 'default'
    },

    optimization: {
        minimizer: [
            new TerserPlugin( {
                sourceMap: true,
                terserOptions: {
                    output: {
                        // Preserve CKEditor 5 license comments.
                        comments: /^!/
                    }
                },
                extractComments: false
            } )
        ]
    },

    module: {
        rules: [
            {
                test: /.svg$/i,
                use: [ 'raw-loader' ]
            },
    {
                test: /ckeditor5-[^/\]+[/\]theme[/\].+.css/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                        }
                    },
                ],
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    }
                ]
            }
        ]
    }
};

Leave a Comment