wordpress-webpack-workflow icon indicating copy to clipboard operation
wordpress-webpack-workflow copied to clipboard

Load img in scss

Open annelyse opened this issue 3 years ago • 4 comments

Hello,

How do you do to load image in scss file ? I have an error can't resolve path

thanks !

annelyse avatar May 11 '21 17:05 annelyse

Hello, same issue here, i don't understand how to load any files (images, fonts...) in scss file

pixels-aromates avatar Jun 21 '21 15:06 pixels-aromates

image image

Install file-loader first: yarn add -D file-loader

PieterBoghaert avatar Oct 12 '21 07:10 PieterBoghaert

This worked for me: Install file-loader first: yarn add -D file-loader

In config.base.js:

const imageRules = {
    test: projectOptions.projectImages.rules.test,
    use:  [
        {
            loader: 'file-loader',
            options: {
                publicPath: '../images/',
                outputPath: '../public/images/',
                name: '[name].[ext]?[hash]',
            },
        },
    ],
}

In SCSS: background-image: url('./../images/gif-placeholder.gif');

basmiddelham avatar Feb 23 '22 09:02 basmiddelham

@basmiddelham Hi! Can you share please you files structure in your project? I can't figure out how it should be

eugeneweblab avatar Jan 16 '23 15:01 eugeneweblab