Question

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

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

我已经在SO和Google上对此进行了很多研究，但没有发现任何人在做类似的情况。我应该只使用网络包吗？或者我是否应该单独观看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移动到文件，我将其用于生成版本。对于dev我只是让样式加载器注入它。

Answer 2

我有类似的问题，我能够提出的唯一解决方案就是写my own plugin。

如何使用Webpack和Sass进行spriting？

2 个答案: