我正在尝试使用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;
看起来你正在使用CSS模块。当文档加载时，您的WebPack模块规则将为每个CSS类生成唯一的名称。
在配置中看到这一行： localIdentName: "[name][local][hash:base64]"
当include项目中的react-table.css文件时，css-modules将格式化css名称以使它们保持局部作用域，例如，生成的标记：（ react__table___2zWw1）但react-table不使用本地在它的代码中使用scoped 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>
当我包括它时，它为我工作
import 'react-table/react-table.css'
在主js文件中，哪里使用react-table