Question

我正在用ReactJS写一个网页。我制作了一个css样式表来更改一些引导类（对于我的Navbar字体），添加了链接到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;

Answer 1

在html文件中添加<link rel="stylesheet" type="text/css" href="/some/path/styles.css">等链接不需要webpack.config.js中的加载程序。

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

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

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

希望这有帮助！

Answer 2

您需要做的就是明确要求CSS或Sass依赖，就像它的JS依赖项一样，Webpack将构建一个包含您需要的所有内容的包。例如

的src /应用程序/ index.js

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

有关详细说明Webpack Embedded Stylesheets

webpack服务器不加载css样式表

2 个答案: