如何使用Webpack和Sass进行spriting？

Question

我正在将我的构建系统从具有自定义任务的Grunt移动到Webpack.至于JavaScript模块,它工作得很好,但我不太确定如何使用我的Sass样式表.

我依赖于我的AMD模块中的Sass文件,Webpack可以从中读取并生成bundle.css.但我最好让我的构建管道使用spritesmith生成精灵,然后将图像复制到构建目录并使用Sass mixins生成正确的CSS规则.

我在SO和谷歌上都研究了很多,但没有找到任何人做类似的情况.我应该只使用网络包吗？或者我应该有单独的Grunt任务观看图像,生成精灵然后运行Webpack吗？

Answer 1

我有一个类似的问题，我有一个充满 png 文件的目录，我需要将其转换为 CSS，以便具有正确类名的 div 加载图像。我想使用 url-loader 以便内联小文件。

问题当然是您不能将目录指定为加载程序应该加载的内容，只能指定现有文件。

我的解决方案是在 png 目录中创建一个自定义加载器并将其自身作为输入，这样它就可以将文件放在自己的目录中，并使用 png 文件的所有 require 语句导出 CSS。

这是它的 webpack 条目：

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

加载器代码（coffeescript 但你懂的）：

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 移动到一个文件中，我为生产构建所做的。对于开发人员，我只是让样式加载器注入它。

Answer 2

我有类似的问题，我能想出的唯一解决方案是编写自己的插件。