ag网格webpack css不制作到网站

Question

我在我的反应应用程序中使用ag网格，不能让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"

尝试了不同类型的加载程序，reolserver在ag-grid中仍然没有成功.你知道这里面发生了什么吗？

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"
],

到.角-cli.json

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

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

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

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

下面是一个GitHub演示：https://github.com/ag-grid/ag-grid-angular-example

希望这能有所帮助！

布尔哈卡

Answer 2

根据alias文件和Ag的React文档的导入语句，您似乎缺少了ag-grid-community目录在node_modules中的解析别名的配置。

在Webpack的配置中添加以下内容：

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

此外，您可能必须修改您的CSS加载程序在Webpack的配置。在ag-网格反应-示例上的GitHub上有几个Webpack配置的好例子：

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

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

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

希望这能有所帮助！