Problems with loaders of webpack

[re54k]

There are some problems on resolving sprites in sass files with loaders of webpack. Because of the loader, css.source.input.file in postcss is not the right file any more, but the loader's path with !path/to/right/css/file. UIn other words, the image.path will be changed as:

E:\www\Test\react-transform-boilerplate\node_modules\sass-loader\index.js!E:\www\Test\react-transform-boilerplate\src\img\sp-num\1.png

so that all images are not exist.

15 Jan 15:12:31 - [postcss-sprites] => Skip ../img/sp-num/1.png - not exist.

Is there options to fix this case? Or am i lost some key point?

[vvasilev-]

This issue is related to #35 and will be added in upcoming v3.0 of the plugin. You can see PR https://github.com/2createStudio/postcss-sprites/pull/25 for temporary fix until v3.0 is released(next week).

[re54k]

Thank you! I'll close this.

[Robin-front]

how to use in Webpack? my config:

//loader
{
        test: /\.less$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss!less')
      }
...
...
postcss: [
    cssnano({
      autoprefixer: {
        add: true,
        remove: true,
        browsers: ['last 3 versions']
      },
      discardComments: {
        removeAll: true
      },
      safe: true,
      sourcemap: true
    }),
    sprites({
      stylesheetPath: './dist/',
      spritePath: './dist/imgs/'
     })
]
...

but, has some error in command line:

Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./imgs/sprite.png

[vvasilev-]

@Robin-front, sorry for late response. You got this error because css-loader can't resolve correctly the path to the generated spritesheet. The possible solution is to skip url resolving.

    ...
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url!postcss!less')
    ...