How to properly include background-image in webpack?

S

s243442019-01-20 13:42:02

webpack

s24344, 2019-01-20 13:42:02

Hello. Please tell me how to solve the following problem correctly:
I'm trying to include background-image in the webpack 4 build, I get the following error:
Uncaught Error: Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader .js):
ModuleNotFoundError: Module not found: Error: Can't resolve './images/webpack.png' in 'D:\WebProjects\webpack-boilerplate\src\scss'
webpack-boilerplate/package.json

{
  "name": "webpack-boilerplate",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack --watch"
  },
  "browserslist": [
    "> 1%",
    "last 3 version"
  ],
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.4.5",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.8",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  }
}

webpack-boilerplate/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./dist/app.css">
  <title>Document</title>
</head>
<body>
<div class="app">
  <div class="app__picture">
    <!--<img src="./dist/images/webpack.png" alt="">-->
  </div>
  <div id="react-root"></div>
</div>
<script src="./dist/app.js"></script>
</body>
</html>

webpack-boilerplate/webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    app: './index.js'
  },
  mode: "development",
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: '/node_modules/'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: {
                path: 'src/js/postcss.config.js'
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: {
                path: 'src/js/postcss.config.js'
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ]
}

webpack-boilerplate/src/images/webpack.png
webpack-boilerplate/src/scss/main.scss

.app {
  display: flex;

  &__picture {
    width: 200px;
    height: 200px;
    background-image: url('./images/webpack.png');
    // background: #eee url('./images/webpack.png') 0 0 no-repeat;
  }
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

Polina, 2019-01-20
@paulinekorkina

In scss , specify the path to the file as follows paths in source files must be relative to the file itself. background-image: url('../images/webpack.png');