Ag-grid + React + Redux 未设置样式

Question

我能够构建 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。如何让它发挥作用？

Answer 1

我缺少库中的样式表：

import 'ag-grid-root/dist/styles/ag-grid.css';
import 'ag-grid-root/dist/styles/theme-fresh.css';

Ag-grid + React + Redux 未设置样式

Ag-grid + React + Redux not styled

reactjs

redux

ag-grid

ag-grid-react