A
A
Andrey Dyrkov2018-02-06 16:06:12
Frontend
Andrey Dyrkov, 2018-02-06 16:06:12

How to configure webpack resolve-url-plugin correctly?

I have a project

src
---components
------header
---------header.scss
---public
------img
---------header-background.png

in header.scss file I have image import header-background.png
.header{
  background:url('../../public/img/header-background.png') left top no-repeat;
}

This picture connects everything fine, but it is thrown into the build folder of my project, and then into the img folder
build
---css
------index.css //мой файл который подключает картинку
---img
------header-background.png

But the url is wrong and this picture will never connect to build.
To solve this problem, I used the resolve-url-plugin, but it did not help me much,
With its use I am from
.header{
  background:url('../../public/img/header-background.png') left top no-repeat;
}

get
.header {
  background: url(img/header-background.png) left top no-repeat;
}

This is better, but he ends up looking for the image inside the css folder, I need the url to be ../img/header-background.png.
Here is webpack.config.js
module.exports = {
  ...
  rules:[
     {
      test:/\.(css|scss|sass)$/,
      use:ExtractTextPlugin.extract({
        use:[
          {loader:'css-loader',options:{sourceMap:true}},
          {loader:'resolve-url-loader',options:{sourceMap:true}},
          {loader:'fast-sass-loader',options:{sourceMap:true}}
          ]
      }),
    },
  ],
  ...
}

How can I set up this loader so that it still understands that css will be in the css folder and I need to exit it first?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question