webpack-drupal-breakpoints-loader

Webpack Drupal Breakpoints Loader

Parse THEMENAME.breakpoints.yaml and use them in js scripts

Install

npm install @skilld/webpack-drupal-breakpoints-loader

Usage

In root of drupal theme create THEMENAME.breakpoints.yml

THEMENAME.mobile:
  label: mobile
  mediaQuery: 'all and (max-width: 639px)'
  weight: 0
  group: THEMENAME
  multipliers:
    - 1x
    - 2x
THEMENAME.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 640px) and (max-width: 1023px)'
  weight: 1
  group: THEMENAME
  multipliers:
    - 1x
    - 2x
THEMENAME.wide:
  label: wide
  mediaQuery: 'all and (min-width: 1024px)'
  weight: 2
  group: THEMENAME
  multipliers:
    - 1x
    - 2x

In webpack.config.js

    rules: [
      {
        test: /\.yml$/,
        use: [
          {
            loader: 'breakpoints-loader',
          },
        ],
      },
      ...

In js file

const config = require('path-to-your-THEMENAME.breakpoints.yml');

Usage Example

https://github.com/skilld-labs/kaizen/blob/master/src/js/breakpoints.js#L14