How to use email with Webpack and Sass?

Question

I am moving my build system from Grunt with custom tasks to Webpack. Regarding JavaScript modules, it works great, but I'm not sure what to do with my Sass styles.

I have dependencies on Sass files in my AMD modules that Webpack can read and generate bundle.css. But I would ideally want my collector to build sprites using spritesmith, then copy the images to the assembly directory and use Sass mixers to create the correct CSS rules.

I have researched this a lot on both SO and Google, but have not found anyone like this scenario. Should I use exclusively webpack? Or should I have a separate Grunt task, watching images, generating sprites, and then running Webpack on this?

Answer 1

I have a similar problem, I have a directory full of png files that I need to convert to CSS so that the div with the correct class name loads the image. I would like to use url-loader so that small files are nested.

The problem, of course, is that you cannot specify the directory as something loaded by the bootloader, only existing files.

My solution is to create a custom loader in png dir and give it the input itself so that it can glob files in its own directory and export CSS with all the require instructions for png files.

This is the entry for the web page:

'!!style!css!./resources/images/images-as-css-loader.coffee!./resources/images/images-as-css-loader'

Loader code (coffeescript, but you get the idea):

glob = require 'glob'
path = require 'path'
sizeOf = require 'image-size'

module.exports = (dummy) ->
  this.cacheable true

  dir = path.dirname this.resourcePath
  entries = for file in glob.sync "#{dir}/*.png"
    @addDependency file
    className = (path.basename file, '.png')
    imgDim = sizeOf file
    """
      .#{className} {
        width: #{imgDim.width}px;
        height: #{imgDim.height}px;
        background-repeat: no-repeat;
        background-image: url('~!!url?limit=1024!#{file}');
      }

    """

  # Return CSS text
  return entries.join ''

webpack, CSS , . dev .

Answer 2

, , , .