React 没有加载引导 css 文件答案

【问题标题】：React is not loading bootstrap css fileReact 没有加载引导 css 文件
【发布时间】：2018-09-08 04:43:21
【问题描述】：

这是我的组件

import React from 'react'; 
import 'bootstrap/dist/css/bootstrap.css';
class Test extends React.Component{
 render(){
    return(
        <div>
            <button className="btn btn-danger"> Button </button>
        </div>
    )
 }
}
export default Test;

按钮仍然是一个普通的 html 按钮！这让我感到困惑，即使在 cmd 中也没有错误。我在 ElectronJs 应用程序中使用 react。

【问题讨论】：

你得到什么错误信息？
没有错误我的朋友！

标签： node.js reactjs bootstrap-4 electron

【解决方案1】：

把它放在你的 ReactDOM.render() 所在的 index.js 文件中，

import 'bootstrap/dist/css/bootstrap.css';

它将对其渲染它的所有子组件全局可用。

【讨论】：

都是一回事，这真的让我很困惑
你试图把它放在子组件中，它会工作，尝试一次
试试把bootstrap文件夹的完整路径，node_modules/bootstrap/dist/css/bootstrap.css，你在用webpack吗？如果是这样，请添加 css 处理器来处理 css。

【解决方案2】：

在您的第 2 行，添加 ./，应该是：

import React from 'react'; 
import './bootstrap/dist/css/bootstrap.css';

已编辑：

在您的 webpack 配置文件中，检查 resolve section，确保包含您的引导 css 文件路径。

例如：

const bootstrapPath = path.join(
    __dirname,
    'bootstrap/dist/css/bootstrap.css'
);

应该是这样的：

resolve: {
    alias: {
        bootstrapPath: path.join(__dirname, 'your complete path')
    },
    root: srcPath,
    extensions: ['', '.js', '.css'],
    modulesDirectories: ['node_modules', srcPath, commonStylePath, bootstrapPath]
}

但请确保您拥有style loader 和css loader。例如。 loaders:[{ test: /\.css$/, loader: "style-loader!css-loader" }]，如果没有，您将不得不运行 npm install css-loader style-loader --save

之后你可以在js文件require('bootstrap.min.css')中使用它

我希望这会有所帮助。

【讨论】：

我从 node_modules 导入 bootsrap css 文件，而不是从同一个文件夹
你有 webpack 配置文件吗？

【解决方案3】：

如果你自己写css，然后导入它，行吗？如果没有，很可能问题是您没有将 webpack 设置为使用 CSS 加载器。

【讨论】：

【解决方案4】：

如果您仅为特定项目安装了 CSS，则可以访问它（通过将以下内容放入 index.js）：

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

因为node_modules 文件夹是src 文件夹的对等体，并且index.js 在src 文件夹内。

【讨论】：