Новости‎ > ‎

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

Отправлено 29 окт. 2016 г., 14:32 пользователем Denis Baskovsky   [ обновлено 29 окт. 2016 г., 14:33 ]
Честно говоря мой скепсис по 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>
  )
}

Теперь норм. 
Comments