ag-grid webpack css not making to the website

Question

I am using ag-grid in my react app, cannot make the css work with webpack.

grid is looking like this

image:

const path = require("path");
var webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let CopyWebpackPlugin = require("copy-webpack-plugin");
var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
var BitBarWebpackProgressPlugin = require("bitbar-webpack-progress-plugin");
let plug = require("@babel/plugin-proposal-class-properties");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      },
      {
        test: /\.css$/,
        use: "css-loader/locals"
      }
    ]
  },
  node: {
    fs: "empty"
  },
  context: path.join(__dirname, "Scripts", "src"),
  entry: {
    d1: "./entries/d1Page.js",
    h1: "./entries/h1Page.js",
    polyfills: "./entries/polyfills.js",
    d2: "./entries/d2Page.js"
  },
  output: {
    path: path.join(__dirname, "Scripts/dist"),
    filename: "[name].bundle.js",
    publicPath: "/Scripts/dist/"
  },
  resolve: {
    extensions: [".json", ".js", ".jsx", ".css"]
  },
  devtool: "source-map",
  plugins: [new BitBarWebpackProgressPlugin()],
  mode: "development"
};

and importing the CSS in my components like this

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-material.css';
import { AgGridReact } from "ag-grid-react";
.
.
.

part of my packages.json

"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"bitbar-webpack-progress-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1",
"es6": "0.0.7",
"es6-promise": "^4.2.5",
"fs": "0.0.1-security",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.26.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"whatwg-fetch": "^3.0.0",
"ag-grid-community": "^20.2.0",
"ag-grid-react": "^20.2.0"

tried different types of loader, reolserver as suggested in ag-grid still no luck. any idea what is going on in here?

Did you ever solve your problem? – Philip Wrage Sep 14 '19 at 20:49 — Philip Wrage, Sep 14 '19 at 20:49

score 0 · Answer 1 · answered Jun 05 '19 at 15:14

I suggest you to look closely on file paths and file names. Check if your current import method is correct.

Try

@import url('../node_modules/ag-grid/dist/styles/ag-grid.css');
@import url('../node_modules/ag-grid/dist/styles/ag-theme-fresh.css');

Add

"styles": [
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/theme-fresh.css"
],

to .angular-cli.json

Remember to use your path on imports and styles

Try to change .css to .scss on imports.

Open up the console (browser) or look at the terminal (depends on project) and search for errors.

Read docs too: https://www.ag-grid.com/react-getting-started/

Here is a GitHub demo for you: https://github.com/ag-grid/ag-grid-angular-example

Hope this helps!

Brhaka

btw, I am using react but will see look into your suggestions. Thanks — johnny, Jun 05 '19 at 16:47

score 0 · Answer 2 · answered Jun 11 '19 at 23:12

Based on your import statements for the Ag-Grid CSS files and the Ag-Grid documentation for React, it looks like you are missing the configuration of a resolution alias for the ag-grid-community directory within node_modules.

Add the following to your Webpack configuration:

resolve: {
    alias: {
        "ag-grid-community": path.resolve('./node_modules/ag-grid-community')
    }
},

Additionally, you may have to revise your CSS loader within the Webpack configuration. There are several good example Webpack configurations within ag-grid-react-example on GitHub:

According to these example Webpack configurations, the CSS loader is configured as

module: {
    rules: [
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },

Hope this helps!

ag-grid webpack css not making to the website

2 Answers2