Reactjs：ReactTable css 不使用 js 文件中的导入加载 css答案

【问题标题】：Reactjs: ReactTable css doesn't load css using import in js fileReactjs：ReactTable css 不使用 js 文件中的导入加载 css
【发布时间】：2018-10-25 09:43:07
【问题描述】：

我正在尝试使用 this link 的 ReactTable

问题：

当我尝试导入时在我的组件中

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

css 无法导入

当我检查时，我看到这是 css url

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;

【问题讨论】：

发出blob:http://localhost:8080/cfd98537-05a8-4091-9345-d6ae877d3d25 以便热重载工作。在生产模式下，您将看不到这一点。根据你所展示的，我看不出有什么问题。你看到了什么错误？

标签： reactjs webpack react-table

【解决方案1】：

看起来您正在使用 CSS 模块。当文档加载时，您的 WebPack 模块规则将为每个 CSS 类生成一个唯一的名称。

在你的配置中看到这一行： localIdentName: "[name]<em>[local]</em>[hash:base64]"

当您include 项目中的 react-table.css 文件时，css-modules 将格式化 css 名称以使其保持本地范围，例如，生成的标记：( react__table___2zWw1) 但 react- table 没有在它的代码中使用本地范围的 css 名称。

您的样式表链接 (link rel=...) 应该可以使用，但如果您希望使用 CSS-Modules，则必须从模块加载器中排除该文件，或排除所有 node_modules/react-table ：

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

您可以尝试上述方法，或者根据文件名从使用模块加载器中排除特定的 .css 文件。在这种情况下，您必须通过将自定义 react-table.customCSS.css 文件复制到本地并再次导入来引用它：

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

【讨论】：

【解决方案2】：

当我包含它时它对我有用

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

在主 js 文件中，使用 react-table 的地方

【讨论】：