Webpack. Sass-loader неверно указывает путь для url() в css. Почему?

Question

[KnightForce]

Часть конфига.
Output:

output: {
   path: path.join(__dirname, 'public'),
   filename: '[name].js',
   publicPath: '/public/',
},

File-loader:

{
     test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
     use: "file-loader?name=[path][name].[ext]",
}

Все файл перекидываются по своим местам, сборка собирается без ошибок.
Файлы лежат так:
style.scss: frontend/stylesheets/style.scss
Изображения: frontend/images/icons

В sass файле указываю background: url(../images/icons/image,png)
В выходном файле css: background: url(/public/images/icons/search.png)

Что с этим делать?

Answer 1

[Vlad Feninets]

sass компилится при помощи лоадера, а лоадер "кушает" path из вебпак-конфига

Comments

[KnightForce]

Less-loader такого не вытворял.
Есть вариант "персонального" пути?

[Vlad Feninets]

KnightForce: попробуй инклудов добавить

{
                loader: "sass-loader",
                options: {
                    includePaths: ["absolute/path/a", "absolute/path/b"]
                }

пример отсюда - https://github.com/webpack-contrib/sass-loader

[KnightForce]

Vlad Feninets: includePaths - включение путей для использования внутри loader?

[Vlad Feninets]

KnightForce: это параметр из node-sass, который лоадер юзает внутри. Он позволяет расширить кол-во директорий и в случае если он не найдет в одной папке этот файлик - попробует зарезолвить его по тому, который ты указал в includePath.

[KnightForce]

Vlad Feninets: не работает.
Попробовал, как в доках описано использовать resolve-url-loader.

use: extractSass.extract({
   use: [
      {
         loader: "css-loader"
      },
      {
          loader: "resolve-url-loader",
      }, 
      {
          loader: "sass-loader",                   
       }],
       fallback: "style-loader"
}),

Ничего не меняется.

Answer 2

[Артур]

Попробуй
publicPath:"./"

Comments

[KnightForce]

Помогло "../".
publicPath для чего вообще? Только в production для обращения к серверу?

[anxieter]

Всем привет. Бьюсь над такой же проблемой - ну никак не хотят Dmitrijs Balcers в SASS отрабатывать. Вот так они инклудятся в app.scss

@import 'common/**/*';
@import 'pages/*';

Вот код из конфига webpack

{
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {loader: 'css-loader'},
            {loader: 'resolve-url-loader', options: {sourceMap: true}},
            {
              loader: 'sass-loader', options: {
                sourceMap: true,
                includePaths: [
                  path.resolve(__dirname, 'source/style/pages/'),
                  path.resolve(__dirname, 'source/style/common/'),
                  path.resolve(__dirname, 'source/style/common/components/')
                ]
              }
            }
          ],
        }),
      },

Всем что только можно пробовал - все равно

File to import not found or unreadable: common/**/*.