javascript - 如何在 Webpack 和 Sass 中使用 spriting？

Question

我正在将我的构建系统从带有自定义任务的 Grunt 转移到 Webpack。至于 JavaScript 模块，它工作得很好，但我不太确定如何处理我的 Sass 样式表。

我在我的 AMD 模块中依赖于 Sass 文件，Webpack 可以从中读取并生成 bundle.css。但理想情况下，我希望我的构建管道使用 spritesmith 生成 sprite，然后将图像复制到构建目录并使用 Sass mixins 生成正确的 CSS 规则。

我在 SO 和 Google 上对此进行了很多研究，但还没有发现任何人在做类似的情况。我应该只使用 webpack 吗？或者我是否应该有单独的 Grunt 任务来观看图像、生成 Sprite 然后在其上运行 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 移动到一个文件中，这是我为生产构建所做的。对于开发人员，我只是让样式加载器注入(inject)它。