Ag-grid + React + Redux без стиля

Я могу создать пример приложения AG-Grid. Он работает плавно и красиво оформлен.

Затем я хотел бы переместить его в свое приложение, но кажется, что стили не применяются. Я поместил все файлы примеров из https://github.com/ceolter/ag-grid-react-example/tree/master/src в новую папку в моем проекте, создав таким образом компонент, который я использую в своем приложении:

import React from 'react'
import AgGrid from './AgGrid/myApp.jsx';

// Pages
export default class PatPorts extends React.Component {
    render() {
        return (
            <div>
                <h2>Ports</h2>
                <div>Some home page content</div>
                <AgGrid/>
            </div>
        )
    }
}

Мой webpack.config следующий:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, '../public/js');
var APP_DIR = path.resolve(__dirname, 'app');

var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.js$|\.jsx$/,
                loader: 'babel-loader',
                include: APP_DIR, // Where to look for *.js and *.jsx
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },
    plugins: [
        new webpack.NoErrorsPlugin() // do not automatically reload if there are errors
    ],
    resolve: {
        alias: {
            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
        }
    }
};

module.exports = config;

Я новичок в реакции, поэтому мне может не хватать чего-то элементарного ... Есть идеи? Я могу найти myApp.css в сгенерированном пакете. Как заставить работать?


person Amio.io    schedule 19.07.2016    source источник


Ответы (1)


Мне не хватало таблиц стилей из библиотеки:

import 'ag-grid-root/dist/styles/ag-grid.css';
import 'ag-grid-root/dist/styles/theme-fresh.css';
person Amio.io    schedule 19.07.2016