Webpack error while importing an image url as background in css

Question

I am adding a background image to my section in my scss file. The linear gradient is to darken the image. The url is correct and I am sure of it.

    background-image: url(../../assets/img/hero-bg.jpg),
        linear-gradient(rgba(black, 0.3), rgba(black, 0.3));
    height: 1980px;

I am getting the following error -

ERROR in ./src/sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/sass/main.scss)

Module build failed (from ./node_modules/css-loader/dist/cjs.js):

Images through html are loading fine. This is my webpack config -

    rules: [
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/i,
            use: [ 'style-loader',
                'css-loader',
                'sass-loader',
            ],
        },
        {
            test: /\.html$/i,
            use: ['html-loader'],
        },
        {
            test: /\.(svg|jpeg|jpg|png|gif)$/i,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[hash].[ext]',
                    publicPath: path.resolve(__dirname, '/assets/img'),
                    outputPath: 'assets/img',
                },
            },
        }
    ],

plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
        filename: '[name].css',
    }),
    new HtmlWebpackPlugin({
        template: '/src/template.html',
    }),
],

Could someone solve this?

Sam Chen · Accepted Answer · 2020-11-24 15:31:24Z

2

There's no sourceMap option for style-loader, either set it for css-loader or sass-loader as per https://github.com/webpack-contrib/sass-loader#sourcemap.

answered Nov 24, 2020 at 15:31

Sam Chen

2,17818 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Akash Over a year ago

Thanks for the tip, however I realised my mistake earlier and removed it. It has still not fixed my problem

Sam Chen Over a year ago

Then update your post so we can see what's going on.

Sam Chen Over a year ago

I saw you only update your configuration here stackoverflow.com/posts/64989401/revisions, which doesn't make sense if you still have that same error.

Akash Over a year ago

I have updated the error earlier? Arent you able to see that?

Sam Chen Over a year ago

Will removing your background-image fix the error? If yes, then there might be something wrong with it.

|

Collectives™ on Stack Overflow

Webpack error while importing an image url as background in css

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related