Почему webpack не компилирует Sass-файлы?

Question

[Анатолий]

Добрый день!
Подскажите, пожалуйста, почему при компиляции scss-файлов, в которых присутствует backgroung:('../src), webpack выдает ошибку:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/components_test/menu/menu.scss
Module not found: Error: Can't resolve '../src/img/header/header_bg.jpg' in 'D:\STUDY\Development site\My work\Portfolio\src\components_test\menu'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/components_test/menu/menu.scss 6:104-146
 @ ./src/components_test/menu/menu.scss
 @ ./src/components_test/menu/menu.js

Конфиг и json ниже:

/---------------------- config-------------------/

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('Extract-text-webpack-plugin');

const PATHS = {
  source: path.join(__dirname, './src/'),
  build: path.join(__dirname, 'public')
};

module.exports = {
  entry: {
     'menu': PATHS.source + 'components_test/menu/menu.js',

  },
  output: {
    path: PATHS.build,
    filename: 'js/[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'about.html',
      chunks: ['about', 'unit'],
      template: PATHS.source + 'html/pages/about/about.pug'
    }),
    new HtmlWebpackPlugin({
      filename: 'blog.html',
      chunks: ['blog', 'unit'],
      template: PATHS.source + 'html/pages/blog/blog.pug'
    }),
    new HtmlWebpackPlugin({
      filename: 'login.html',
      chunks: ['login', 'unit'],
      template: PATHS.source + 'html/pages/login/login.pug'
    }),
    new HtmlWebpackPlugin({
      filename: 'welcome.html',
      chunks: ['welcome', 'unit'],
      template: PATHS.source + 'html/pages/welcome/welcome.pug'
    }),
    new HtmlWebpackPlugin({
      filename: 'works.html',
      chunks: ['works', 'unit'],
      template: PATHS.source + 'html/pages/works/works.pug'
    }),
    new ExtractTextPlugin('./css/[name].css'),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
      new webpack.optimize.CommonsChunkPlugin({   
      name: 'unit',
    })
  ],
  module: {
    loaders: [
     
      {
        test   : /\.scss$/,
        loaders: ['style-loader', 'css-loader',  'sass-loader?sourceMap','resolve-url-loader']
      },

      {
        test: /\.(jpg|png|gif)$/,
        include: /img/,
        loader: 'url-loader'
      },
      { test: /\.(woff|woff2|eot|ttf|svg)$/, loader: 'url-loader' },
    ],


    rules: [
      {
        test: /\.css$/,
        // include: paths,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          publicPath: './',
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader', 'resolve-url-loader'],
        }),
      },

      {
        test: /\.(jpg|png|svg)$/,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]'
        },
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader',
        options: {
          pretty: true
        }
      },
    ],

  },
  devServer: {
    stats: 'errors-only',
    port: 9000
  },
};

/---------------------- json-------------------/

{
  "name": "Portfolio",
  "version": "1.0.0",
  "main": "portfolio.js",
  "license": "MIT",
  "dependencies": {
    "jquery": "^3.2.1",
    "normalize.css": "^7.0.0"
  },
  "scripts": {
    "start": "webpack-dev-server --env development",
    "build": "webpack --env production",
    "serv": "static build"
  },
  "devDependencies": {
    "app-root-path": "^2.0.1",
    "components-font-awesome": "^4.7.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "node-sass": "^4.5.3",
    "node-static": "^0.7.9",
    "pug": "^2.0.0-rc.2",
    "pug-loader": "^2.3.0",
    "resolve-url-loader": "^2.0.3",
    "sass-loader": "^6.0.6",
    "scss-loader": "^0.0.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "2.3.3",
    "webpack-dev-server": "^2.5.0"
  }
}

В menu.js прописал: import './menu.scss';

Заранее благодарю !

Answer 1

[Александр Ме]

1. Запуск с параметрами --debug --display-error-details часто помогают увидеть проблему
2. Поменяй местами лоадеры: sass-loader?sourceMap и resolve-url-loader

Comments

[Артем Каюн]

Анатолий: Неужели так сложно заглянуть в документацию по лоадеру https://www.npmjs.com/package/resolve-url-loader