BlueprintJS 的最小 Webpack 2 设置不会加载 CSS
Posted
技术标签:
【中文标题】BlueprintJS 的最小 Webpack 2 设置不会加载 CSS【英文标题】：Minimal Webpack 2 setup for BlueprintJS won't load CSS 【发布时间】：2017-09-18 15:20:59 【问题描述】：我正在尝试创建一个简单的 webpack 2 设置来试验 BlueprintJS 和 TypeScript。我想我已经接近了，但 CSS 没有正确加载。
这里是这个项目的目录结构
源/ index.tsx App.tsx App.css index.html package.json tsconfig.json webpack.config.jsApp.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')
);
App.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;
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",
;
【问题讨论】：
【参考方案1】：您正在使用 CSS modules 将每个类更改为本地标识符，并且您需要引用正确的标识符。但由于它是一个在元素上设置类的库，例如在您使用的按钮上，它不适用于 CSS 模块，因此您需要在 css-loader 中将它们关闭。您可以删除该选项，因为默认情况下它们是关闭的。
test: /\.css$/,
use: [
loader: 'style-loader',
,
loader: 'css-loader',
,
],
,
禁用 CSS 模块后，您还需要更改 CSS 中的导入，因为它被视为相对路径。 Webpack 允许您以 ~ 开头的路径表明它应该被解析为模块而不是相对路径。
@import "~@blueprintjs/core/dist/blueprint.css";
【讨论】：
以上是关于BlueprintJS 的最小 Webpack 2 设置不会加载 CSS的主要内容，如果未能解决你的问题，请参考以下文章
我需要访问 InputGroup BlueprintJs react 组件中的输入