bluewings/pug-as-jsx-loader

Thanks for you work

Closed this issue · 2 comments

jt3k commented

I have two questions.

  1. can i use mixins like bemto
  2. can i use inline styles in a style tag?
    image
    i also tryied this variants
style
  .lolo { background: red; }
style
  ='.lolo { background: red; }'
style
  !='.lolo { background: red; }'
style
  |'.lolo { background: red; }'

@jt3k
How about using the @import CSS annotation?

If the pug file name is Sample.pug, the code below will automatically import Sample.scss.
(Definitions for css or scss loaders should be added to webpack.)

Sample.pug

// @import .scss => styles
div(className='{styles.lolo}')
  div(className='{styles.lala}')
    h1 {message}

Sample.scss

.lolo {
  background: red;
  .lala {
    color: blue;
  }
}
import React from 'react';
import styles from './Sample.scss';

export default function (props = {}) {
  const { greetings } = props;
  return (
    <div className={styles.lolo}>
      <div className={styles.lala}>
        <h1>{message}</h1>
      </div>
    </div>
  );
}
jt3k commented

👍