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

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

0 голосов
/ 25 октября 2018

Я пытаюсь использовать 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;

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

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

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

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

0 голосов
/ 11 февраля 2019

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

см. Эту строку в вашей конфигурации: localIdentName: "[name]<em>[local]</em>[hash:base64]"

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

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

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

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

<code>
 test: /\.customCSS.css$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }],
  },
</code>
...