gpt4 book ai didi

reactjs - BlueprintJS 的最小 Webpack 2 设置不会加载 CSS

转载 作者:行者123 更新时间:2023-12-02 20:47:49 26 4
gpt4 key购买 nike

我正在尝试创建一个简单的 webpack 2 设置来试验 BlueprintJS 和 TypeScript。我想我已经很接近了,但是 CSS 没有正确加载。

这是该项目的目录结构

  • src/
    • index.tsx
    • App.tsx
    • 应用程序.css
  • index.html
  • package.json
  • tsconfig.json
  • webpack.config.js

App.tsx 当前包含一个应显示刷新图标的 Button 组件。当我运行 npm run build 时,webpack 指示样式已加载。然而,当我运行 npm run start 并查看应用程序时,该按钮没有图标,也没有其他 CSS 样式。

我一定做错了什么。有人能发现吗?所有文件的来源都包含在下面。如果您能弄清楚为什么当 App.tsx 中的 Button 文本更改时 webpack-dev-server 不会重新编译,那就加分了。欢迎其他建议。

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<App />,
document.getElementById('root')
);

应用程序.tsx

import * as React from "react";
import { Button } from "@blueprintjs/core";
import './App.css';

export class App extends React.Component<{}, {}> {
public render(): JSX.Element {
return (
<Button iconName="refresh" text="Refresh"/>
);
}
}
export default App;

应用程序.css

@import "@blueprintjs/core/dist/blueprint.css";

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BlueprintJS Test</title>
</head>
<body>
<div id="root"></div>
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>

package.json

{
"name": "blueprintplay",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"@blueprintjs/core": "^1.14.0",
"classnames": "^2.2.5",
"react": "^15.4.2",
"react-addons-css-transition-group": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"@types/classnames": "^0.0.32",
"@types/pure-render-decorator": "^0.2.27",
"@types/react": "^15.0.18",
"@types/react-addons-css-transition-group": "^15.0.1",
"@types/react-dom": "^0.14.23",
"case-sensitive-paths-webpack-plugin": "^2.0.0",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"source-map-loader": "^0.2.0",
"style-loader": "^0.16.1",
"ts-loader": "^2.0.3",
"typescript": "^2.2.2",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}

tsconfig.json

{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

webpack.config.js

const path = require('path');

module.exports = {
entry: [
'./src/index.tsx'
],
output: {
filename: 'bundle.js',
path: __dirname + "/dist"
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.tsx?$/,
use: "ts-loader"
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.(woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
name: 'fonts/[hash].[ext]',
limit: 5000,
mimetype: 'application/font-woff'
}
}
},
{
test: /\.(ttf|eot|svg)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[hash].[ext]'
}
}
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devtool: 'source-map',
devServer: {
host: process.env.HOST, // Defaults to `localhost`
port: process.env.PORT, // Defaults to 8080
hot: true,
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
stats: "verbose",
};

最佳答案

您正在使用CSS modules它将每个类更改为本地标识符,并且您需要引用正确的标识符。但由于它是一个在元素上设置类的库,例如在您正在使用的按钮上设置类,因此它无法与 CSS 模块一起使用,因此您需要在 css-loader 中将其关闭>。您可以删除该选项,因为默认情况下它们是关闭的。

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

禁用 CSS 模块后,您还需要更改 CSS 中的导入,因为它被视为相对路径。 Webpack 允许您以 ~ 开始路径,以指示应将其解析为模块而不是相对路径。

@import "~@blueprintjs/core/dist/blueprint.css";

关于reactjs - BlueprintJS 的最小 Webpack 2 设置不会加载 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43545814/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com