Скепсис по JSX прошел

1 минута чтения

Честно говоря мой скепсис по webpack’у походу прошел. От JSX пока тошнит, особенно раздражает невозможность описания CSS прямо в коде с подсветкой синтаксиса и прочих вещей. Но что поделать иначе писать html в js совсем ущербно : )

После того как начал переводить ProstoDiary на Skate.js с веб-компонентами, попал в дурацкую ситуацию с невозможностью нормально описывать стили. Как знаете в custom elements они должны быть описаны внутри хоста. Сначала решил задачу довольно топорно с ES6 экранированием:
static render() {
  return (
    <div></div>
    <style>`
      div {
        /* something */
      }
    `</style>
  )
}
Это было не дело, надо было искать нормальный механизм. Откопал на npm либу raw-loader. Она позволяет получать представление файлов в текстовом виде. Добавил ее, изменил webpack.config.js, прикрутил PostCSS autoprefixer и вот что получилось.

require('raw-loader');
module.exports = {
  postcss: [
    autoprefixer({
      browsers: ['last 2 versions']
    })
  ],
  module: {
    loaders: [{
      test: /.css$/,
      loaders: ['raw', 'postcss-loader']
    }],
  }
};

Теперь пишу рядом с компонентом styles.css. А в js компоненте вот так:

import styles from './styles.css';
...
static render() {
  return (
    <div></div>
    <style>{styles }</style>
  )
}
Теперь норм. 

Добавить комментарий