Reactjs: ReactTable CSS не загружает CSS с помощью импорта в JS-файл

Я пытаюсь ReactTable, используя эту ссылку

Проблема:

В моем компоненте, когда я пытаюсь импортировать

import 'react-table/react-table.css'

CSS не получает импорт

Когда я проверяю, я вижу это как URL CSS

blob:http://localhost:8080/cfd98537-05a8-4091-9345-d6ae877d3d25

но это работает

<link rel="stylesheet" href="node_modules/react-table/react-table.css">

файлы:

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      }
    ]
  },
  plugins: [htmlWebpackPlugin]
};

index.js

import React from "react";
import ReactDOM from "react-dom";
import EmpTable from "./components/Emptable.js";
import "react-table/react-table.css";

function renderApp() {
  ReactDOM.render(<EmpTable />, document.getElementById("root"));
}

renderApp();

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React and Webpack4</title>
  <link rel="stylesheet" href="node_modules/react-table/react-table.css">
</head>

<body>
  <div id="root"></div>
</body>

</html>

Emptable.js

import React, { Component } from "react";
import ReactTable from "react-table";
import axios from "axios";

const column = [
  {
    Header: "User ID",
    accessor: "userId"
  },
  {
    Header: "ID",
    accessor: "id"
  },
  {
    Header: "Title",
    accessor: "title"
  },
  {
    Header: "Completed",
    accessor: "completed"
  }
];

class EmpTable extends Component {
  constructor(props) {
    console.log("Loading...");
    super(props);
    this.state = { value: [], isLoading: false };
    this.loadData = this.loadData.bind(this);
  }

  componentDidMount() {
    console.log("componentDidMount");
    this.loadData();
  }

  componentDidCatch(error, info) {
    console.log("componentDidCatch");
    // You can also log the error to an error reporting service
    console.log(error);
  }

  loadData() {
    console.log("loadData");
    axios
      .get("https://jsonplaceholder.typicode.com/todos")
      .then(response => {
        this.setState({ value: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <button onClick={this.loadData}>Refresh Grid</button>
        <ReactTable data={this.state.value} columns={column} />
      </div>
    );
  }
}

export default EmpTable;
Источник

0 ответов

Похоже, вы используете CSS-модули. Правило вашего модуля WebPack будет генерировать уникальное имя для каждого класса CSS при загрузке документа.

увидеть эту строку в вашем конфиге: localIdentName: "[name][local][hash:base64]"

Когда ты include В файле act-table.css вашего проекта css-modules будут форматировать имена css, чтобы они оставались локально, например, полученная разметка:( react__table___2zWw1) но реагирующая таблица не использует локальные имена CSS в своем коде.

Ваша ссылка на таблицу стилей (link rel=...) должна работать, но если вы хотите использовать CSS-модули, вы должны исключить файл из загрузчика модулей или исключить все node_modules/ реагировать-таблицу:

{
   test: /\.css$/,
   exclude: [/node_modules/],
   ...
}

Вы можете попробовать описанное выше или альтернативно исключить определенные файлы.css из загрузчика модулей, основываясь на их имени файла. В этом случае вам нужно будет сослаться на пользовательский файл react-table.customCSS.css, скопировав его локально в ваш проект и снова импортировав:

<code>
 test: /\.customCSS.css$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }],
  },
</code>
Источник

Это работает для меня, когда я включаю

import 'react-table/react-table.css'

в основном js-файле, где когда-либо использовать ответную таблицу

Источник
Другие вопросы по тегам