0

I am able to build the example app of app of AG-Grid. It's running smoothly and is styled nicely.

Then I would like to move it to my app but it seems that the styles are not applied. I put all the example files from https://github.com/ceolter/ag-grid-react-example/tree/master/src to a new folder in my project thus making a component that I use in my app:

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>
        )
    }
}

My webpack.config is the following:

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;

I am new to react so I may be missing something elementary... Any ideas? I can find myApp.css in the generated bundle. How to make it work?

4

1 回答 1

1

我缺少库中的样式表：

import 'ag-grid-root/dist/styles/ag-grid.css';
import 'ag-grid-root/dist/styles/theme-fresh.css';
于 2016-07-19T06:15:27.140 回答