webpack-drupal-breakpoints-loader

src="https://webpack.js.org/assets/icon-square-big.svg">

Webpack Drupal Breakpoints Loader

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

Install

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

Usage

In root of drupal theme create THEMENAME.breakpoints.yml

`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

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

In js file

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

Usage Example

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