2createStudio / postcss-sprites

Generate sprites from stylesheets.
MIT License
413 stars 50 forks source link

combile with the webpack-dev-server, my browser reload many time! #94

Closed xiaodianxie closed 6 years ago

xiaodianxie commented 7 years ago

I use the webpack-dev-server to start my server, when I save the stylesheets, the browser refresh many times! This is the demo, https://github.com/xiaodianxie/test-postcss-sprites, hope for help, thanks a lot

vvasilev- commented 6 years ago

@xiaodianxie

Thanks for the report and the test repository. We're assuming that there is a conflict between webpack and our plugin since they're writing in the same folder. If you change the output path of the sprite(see below) and run webpack --watch the build process is working as expected but with webpack-dev-server you will face the problem again regardless of the used path.

let spriteOpt = {
    spritePath: cwd('src'), // before - spritePath: cwd('dest')
}

So we think that the problem is in webpack-dev-server not in the plugin itself.

On a side note as a recommendation, you can use the plugin only for your production builds this way you won't slow down your dev builds.

Thanks again and feel free to reopen the issue if you have any questions.

xiaodianxie commented 6 years ago

thanks for answer,got it.

xblxc commented 6 years ago

@xiaodianxie , look this: https://github.com/egoist/time-fix-plugin

JianTin commented 3 years ago

(Sorry to bother the author) Hello, friend. I also encountered this problem. This seems to be caused by dynamically creating sprites.png. This is my option spritePath:'./dist/assets'. (The dist directory is my webpack.output.path and devServer.contentBase) This option will cause sprites.png to be dynamically created in the dist/assets directory. Therefore, dev-server will always be repackaged. My solution:(Add the following configuration, watchOptions...) devServer: { watchOptions: { ignored: /dist/ } } This operation will ignore changes in the dist directory. (I don't know if it will cause hot update and other problems)