页面CSS样式不生效求助（VS2013+Node.js+Webpack环境）

我使用VS2013 Update 5和Node.js v16开发项目，按官方指南搭建项目结构。为添加CSS样式，安装了css-loader和style-loader包，并更新了webpack-config.js中针对.css文件的配置。执行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"]
            }
        ]
    }
}

package.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"
  }
}

补充说明 #

尝试在index.html中添加<link rel="stylesheet" type="text/css" href="Component/Home.css"/> <link rel="stylesheet" type="text/css" href="Component/Forms.css" />，问题仍未解决。

1. 修复style-loader版本兼容性
   当前使用的style-loader@0.8.3是多年前的旧版本，与webpack 5.x存在兼容性问题。卸载旧版本并安装适配webpack 5的版本：

npm uninstall style-loader
npm install style-loader@3.3.3 --save-dev

2. 在组件中导入CSS文件
   style-loader的作用是将CSS注入到JS bundle中，通过JS动态创建style标签生效，因此必须在对应TSX/JSX组件的顶部导入CSS文件，比如在Home.tsx中添加：

import './Home.css';

直接在index.html中引用本地CSS文件的方式，webpack不会处理这些文件，且构建后文件路径可能发生变化导致加载失败。

3. 调整resolve扩展名顺序
   将常用扩展名前置，避免解析优先级问题：

resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.css', '.Webpack.js', '.web.js']
}

4. 清理缓存后重新构建
   删除构建生成的app-bundle.js、app-bundle.js.map文件，以及node_modules/.cache目录（若存在），再执行构建命令：

npm run build

5. 检查浏览器控制台报错
   打开浏览器开发者工具的Console面板，查看是否存在资源加载失败、JS执行报错等信息，排查style-loader注入样式时的异常。

内容的提问来源于stack exchange，提问作者Manib