webpack CSS样式未显示在页面上

yeotifhr  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(219)

我正在使用VS 2013 Update 5和Node.js v16。我已经按照this指南开始了。我已经尝试通过添加css-loaderstyle-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" />,但没有成功。

fzwojiic

fzwojiic1#

原来href是错的,本来应该是href="Components/Home.css"/>,浏览器控制台里有线索。

相关问题