twopluszero / next-images

Import images in Next.js (supports jpg, jpeg, svg, png and gif images)
MIT License
948 stars 67 forks source link

Loading background image from SCSS doesn't work #60

Closed velkony closed 3 years ago

velkony commented 3 years ago

I would like to specify that the components and scss files are loaded from node_modules

Example:

//index.scss ... .global-footer { background: #34322f url('./images/footer-bg.png'); }

The image is loading as I commented "issuer: /.\w+(?<!(s?c|sa)ss)$/i,", but it is currently in base64 encoded version.

I would like to have the following result: url('/_next/static/images//footer-bg-5216de428a8e8bd01a4aa3673d2d1391.png');

Finally I solved the problem as follows:

config.module.rules.push(
                {
                    test: /\.(png|jpe?g|gif|ico)$/i,
                    issuer: /\.scss$/i,
                    exclude: [/\.(js|jsx|ts|tsx)$/],
                    use: [
                        {
                            loader: require.resolve("url-loader"),
                            options: {
                                limit: false,
                                fallback: require.resolve("file-loader"),
                                publicPath: `${assetPrefix}/_next/static/images/`,
                                outputPath: `${isServer ? "../" : ""}static/images/`,
                                name: "[name]-[hash].[ext]",
                                esModule: false
                            }
                        }
                    ]
                }
            );