Наводим порядок

Данная глава является своего рода «перекуром». Она затрагивает вопросы стилей и верстки приложения.


Autoprefixer и стили

Добавим в webpack возможность обрабатывать стили (style-loader 0.21.0, css-loader 0.28.11, postcss-loader 2.1.4), заодно сразу накинув на них возможности autoprefixer'а.

npm install style-loader css-loader postcss-loader autoprefixer precss --save-dev

P.S. для тех кто пользуется автоматическим способом добавления зависимостей: так как мы добавляем зависимости в webpack.config — npm-install-plugin не может подтянуть их автоматически.

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new NpmInstallPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: function() {
          [autoprefixer, precss];
        }
      }
    })
  ],
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        loaders: ['eslint-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
      },
      {
        loaders: ['babel-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
        test: /\.jsx?$/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

Postcss-loader версии 2.x.x требует наличия в папке со стилями или корневой папке файла postcss.config.js — добавим его со следующим содержимым:

postcss.config.js

module.exports = {};

Не забудьте подключить главный файл стилей для всего приложения:

src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { App } from './containers'
import './styles/app.css'           // <-- импорт стилей
import configureStore from './store/configureStore'

const store = configureStore()

render(
  <Provider store={store}>
    <div className='app'> {/* обернули все в .app */}
      <App />
    </div>
  </Provider>,
  document.getElementById('root')
)

Возможно (если вы копируете код, либо тоже любите одинарные кавычки), wepback выдаст ошибку от ESLint. Для использования одинарной кавычки исправьте правило "jsx-quotes": [1, "prefer-single"] в файлике .eslintrc


Верстка

Верстка и стили не являются темой нашего обучения, поэтому можете просто взглянуть на исходный код, либо сделать как вам хочется.

В реальном приложении имеет смысл стили для компонентов импортировать в коде самих компонентов (например, так), что даст очень большие удобства для переиспользования целых блоков, включая оформление.

results matching ""

    No results matching ""