ag-grid webpack css не вносится на сайт - PullRequest
Новая
       23

ag-grid webpack css не вносится на сайт

6 голосов
/ 03 июня 2019

Я использую ag-grid в своем приложении реакции, не могу заставить CSS работать с веб-пакетом.

Сетка выглядит так

image: enter image description here

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

часть моих пакетов. 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 asпредложил в ag-grid еще не повезло.Есть идеи, что здесь происходит?

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

На основании ваших операторов импорта для CSS-файлов Ag-Grid и документации Ag-Grid для React похоже, что вам не хватает конфигурации псевдонима разрешения для каталога ag-grid-community в node_modules.

Добавьте следующее в вашу конфигурацию Webpack: 

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

Кроме того, вам, возможно, придется пересмотреть ваш загрузчик CSS в конфигурации Webpack. Есть несколько хороших примеров конфигураций Webpack в ag-grid-реагировать-пример на GitHub:

В соответствии с этими примерами конфигураций Webpack загрузчик CSS настроен как 

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

Надеюсь, это поможет!

0 голосов
/ 05 июня 2019

1001 *
*

Я предлагаю вам внимательно изучить пути к файлам и имена файлов. Проверьте правильность текущего метода импорта.

Попробуйте 

@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 / реакции-начало работы /


Вот демоверсия GitHub для вас: https://github.com/ag-grid/ag-grid-angular-example


Надеюсь, это поможет!

Brhaka

...