pug-bem-plain-loader
Pug that adds BEM shortcuts to plain html loader for webpack
pug-bem-plain-loader is a combination of pug-plain-loader and pug-bem plugins
New! v1.1.0
Now you can specify your own prefixes for blocks in the b property:
loaders: 'pug': loader: 'pug-bem-plain-loader' options: b: 'my-' // block prefix
or
loaders: 'pug': loader: 'pug-bem-plain-loader' options: b: true // default 'b-'
Install
npm install pug pug-bem-plain-loader --save-dev
Usage
Settings match pug-plain-loader and pug-bem
Example for Vue Single-File Components
webpack.config.js
module: rules: ... // other rules test: /\.vue$/ loader: 'vue-loader' options: loaders: // this applies to <template lang="pug"> in Vue components 'pug': 'pug-bem-plain-loader' ... // other rules
or
module: rules: ... // other rules test: /\.vue$/ loader: 'vue-loader' options: loaders: // this applies to <template lang="pug"> in Vue components 'pug': loader: 'pug-bem-plain-loader' options: e: '**' // element separator, default: __ m: '++' // modifier separator, default: -- ... // other rules
App.vue
<template lang="pug"> header.header nav.menu a(href="#")._logo Company .list a._item.-active(href="#") Home a._item(href="#") News a._item(href="#") Gallery a._item(href="#") Partners a._item(href="#") About a._item(href="#") Contacts h1._title Hello, World! .myslider._myslider ._slide Content ._slide.-active Content ._slide Content p._text Good weather</template>
Result
Company Home News Gallery Partners About Contacts Hello, World! Content Content Content Good weather
License
ISC License
Author
Legostaev Vadim (legostaev.vadim@mail.ru)