Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
网页包服务器没有';不加载css样式表_Css_Reactjs_Webpack - Fatal编程技术网

网页包服务器没有';不加载css样式表

网页包服务器没有';不加载css样式表,css,reactjs,webpack,Css,Reactjs,Webpack,我正在用ReactJS写一个网页。 我制作了一个css样式表来更改一些引导类(用于我的Navbar字体),添加了到html文件的链接,但它不起作用。然后我安装了样式加载器并编辑了webpack.config文件,但服务器无法加载css文件。请参见下面我的webpack.config代码 var path = require("path"); var webpack = require('webpack'); var DIST_DIR = path.resolve(__dirname, "di

我正在用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;

在html文件中具有类似
的链接不需要
webpack.config.js
中的加载程序

听起来您在浏览器中遇到了控制台错误,显示404文件未找到

如果是这样,则
href=“/some/path/styles.css”
部分没有指向您的文件

此外,我假设,(我知道,危险…)您正试图从
公共
文件夹提供css文件,并且您的服务器可能将此文件夹设置为静态资产文件夹。如果是这种情况,则不需要在
链接的
href
中使用的路径中包含该文件夹名称


希望这有帮助

您所需要做的就是明确地要求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

有关更多详细说明

您的控制台中是否有任何错误?css文件的状态代码为404未找到,没有其他错误。这是一个完全不可能的结果,但是您是否尝试将css路径添加到条目部分?查看这篇文章,并以10票的票数回答:你所说的“将链接添加到html文件”是什么意思?这不是webpack的本意。样式加载器只会将css转换为js。您需要一个插件将其转换为“真正的”css。如果css样式表通过
加载到index.html中,那么您甚至不需要加载程序。如果将css导入react组件,则需要一个加载程序。如果浏览器中出现404,则样式表的路径不正确。