webpack 服务器不加载 css 样式表答案

【问题标题】：webpack server doesn't load css stylesheetwebpack 服务器不加载 css 样式表
【发布时间】：2017-12-23 18:41:56
【问题描述】：

我正在用 ReactJS 写一个网页。我制作了一个 css 样式表来更改一些引导类（用于我的导航栏字体），添加到 html 文件的链接，但它不起作用。然后我安装了样式加载器并编辑了 webpack.config 文件，但服务器再次无法加载 css 文件。请参阅下面我的 webpack.config 代码。

var path = require("path");

var webpack = require('webpack');

var DIST_DIR = path.resolve(__dirname, "dist");

var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css?/,
                loader: "style-loader!css-loader",
                include: SRC_DIR
            }
        ]
    }
};

module.exports = config;

【问题讨论】：

您的控制台是否出现任何错误？
css 文件的状态码是 404 未找到，没有别的。
这完全是在黑暗中拍摄，但是您是否尝试将css路径添加到入口部分？查看这篇文章和 10 个赞的答案：stackoverflow.com/questions/34963051/webpack-not-loading-css
“添加到 html 文件的链接”是什么意思？这不是 webpack 的本意。样式加载器只会将您的 css 转换为 js。你需要一个插件来把它变成一个“真正的”css。
如果css样式表通过<link/>加载到你的index.html中，那么你甚至不需要加载器。如果您将 css 导入您的反应组件，您将需要一个加载器。如果您在浏览器中收到 404，则样式表的路径不正确。

标签： css reactjs webpack

【解决方案1】：

在您的 html 文件中包含诸如 <link rel="stylesheet" type="text/css" href="/some/path/styles.css"> 之类的链接不需要 webpack.config.js 中的加载程序。

听起来您在浏览器中遇到控制台错误，提示找不到 404 文件。

如果是这种情况，那么href="/some/path/styles.css" 部分没有指向您的文件。

此外，我假设（我知道，危险...）您正在尝试从 public 文件夹提供您的 css 文件，并且您的服务器可能将此文件夹设置为静态资产文件夹。如果是这种情况，您不需要在您的link 的href 中使用的路径中包含该文件夹名称。

希望这会有所帮助！

【讨论】：

【解决方案2】：

所有你需要做的就是明确地需要 CSS 或 Sass 依赖，就像你需要它的 JS 依赖一样，Webpack 将构建一个包含你需要的一切的包。例如

src/app/index.js

import 'bootstrap/dist/css/bootstrap.css'; //bootstrap installed via npm
import '../css/custom.css'; // just an example path

详细解释Webpack Embedded Stylesheets

【讨论】：