ag-grid webpack css 没有进入网站

Question

我在我的 react 应用程序中使用 ag-grid，无法使 css 与 webpack 一起使用。

网格看起来像这样

图片：

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"
};

并像这样在我的组件中导入 CSS

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";
.
.
.

我的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"

尝试了不同类型的加载器，如 ag-grid 中建议的 reolserver 仍然没有运气。知道这里发生了什么吗？

Answer 1

我建议您仔细查看文件路径和文件名。 检查您当前的导入方法是否正确。

试试

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

添加

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

到 .angular-cli.json

记住在导入和样式上使用路径

尝试在导入时将 .css 更改为 .scss。

打开控制台（浏览器）或查看终端（取决于项目）并搜索错误。

也阅读文档：https://www.ag-grid.com/react-getting-started/

这里有一个 GitHub 演示：https://github.com/ag-grid/ag-grid-angular-example

希望这会有所帮助！

婆罗门

Answer 2

根据您对 Ag-Grid CSS 文件和Ag-Grid documentation for React 的导入语句，您似乎缺少node_modules 中ag-grid-community 目录的解析别名配置。

将以下内容添加到您的 Webpack 配置中：

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

此外，您可能需要在 Webpack 配置中修改 CSS 加载器。在 GitHub 上的 ag-grid-react-example 中有几个很好的 Webpack 配置示例：

• webpack.config.examples.js
• webpack.config.large.js
• webpack.config.trader.js

根据这些示例 Webpack 配置，CSS 加载器配置为

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

希望这会有所帮助！