Как пользоваться письмом с помощью Webpack и Sass?

Question

Я перемещаю свою систему сборки из Grunt с пользовательскими задачами в Webpack. Что касается модулей JavaScript, он отлично работает, но я не уверен, что делать с моими стилями Sass.

У меня есть зависимости от файлов Sass в моих модулях AMD, которые Webpack может читать и генерировать bundle.css. Но я бы идеально хотел, чтобы мой сборщик построил спрайты, используя spritesmith, затем скопируйте изображения в каталог сборки и используйте Sass mixins для генерации правильных правил CSS.

Я изучил это как на SO, так и на Google, но не нашел никого подобного сценария. Должен ли я использовать исключительно webpack? Или, может быть, у меня есть отдельная задача Grunt, которая смотрит изображения, генерирует спрайты и затем запускает Webpack?

Answer 1

У меня есть аналогичная проблема, у меня есть каталог, полный png-файлов, которые мне нужно преобразовать в CSS, чтобы div с правильным именем класса загружал изображение. Я хотел бы использовать url-loader, чтобы маленькие файлы были вложены.

Проблема, конечно, в том, что вы не можете указать каталог как загружаемый загрузчиком, а только существующие файлы.

Мое решение - создать пользовательский загрузчик в png-каталоге и предоставить его в качестве входных данных, чтобы он мог glob-файлы в своем собственном каталоге и экспортировать CSS со всеми требованиями для файлов png.

Это запись 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.