我正在使用VS 2013 Update 5和Node.js v16。我已经按照this指南开始了。我已经尝试通过添加css-loader
和style-loader
包来添加css,并且已经更新了.css
文件的webpack-config.js。当我运行node_modules\.bin\webpack ./app.tsx --config webpack-config.js
时,我得到:
然后当我运行这个项目时,它显示的页面没有应用css样式。我认为仅仅将.css文件显示为构建版本还不够好,因为它不是绿色的?
webpack-config.js
module.exports = {
devtool: 'source-map',
entry: "./app.tsx",
mode: "development",
output: {
filename: "./app-bundle.js"
},
resolve: {
extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx', '.css']
},
module: {
rules: [
{
test: /\.tsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'ts-loader'
}
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
}
]
}
}
程序包-json
{
"name": "ProjectName",
"version": "0.0.0",
"description": "ProjectDescription",
"main": "server.js",
"author": {
"name": "Author",
"email": ""
},
"dependencies": {
"@popperjs/core": "^2.11.6",
"@types/prop-types": "^15.7.5",
"@types/react": "^18.0.21",
"@types/react-transition-group": "^4.4.5",
"@types/scheduler": "^0.16.2",
"bootstrap": "^5.2.2",
"braces": "^2.3.1",
"css-loader": "^5.2.4",
"csstype": "^3.1.1",
"express": "~4.17.1",
"js-tokens": "^8.0.0",
"path": "~0.12.7",
"react": "^18.0.0",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-transition-group": "^4.4.5",
"style-loader": "~0.8.3",
"ts-loader": "~9.3.1",
"ts-node": "~10.8.0",
"ts-node-dev": "^2.0.0",
"webpack": "~5.0.0",
"webpack-cli": "~4.10.0"
},
"scripts": {
"build": "webpack-cli ./app.tsx --config webpack-config.js"
},
"devDependencies": {
"typescript": "^4.8.4"
}
}
编辑1
我试过在index.html中添加<link rel="stylesheet" type="text/css" href="Component/Home.css"/> <link rel="stylesheet" type="text/css" href="Component/Forms.css" />
,但没有成功。
1条答案
按热度按时间fzwojiic1#
原来
href
是错的,本来应该是href="Components/Home.css"/>
,浏览器控制台里有线索。