Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/81.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
Html 如何将自定义css导入reactjs项目_Html_Css_Twitter Bootstrap_Reactjs_Jsx - Fatal编程技术网

Html 如何将自定义css导入reactjs项目

Html 如何将自定义css导入reactjs项目,html,css,twitter-bootstrap,reactjs,jsx,Html,Css,Twitter Bootstrap,Reactjs,Jsx,我真的很难将一个自定义bootstrap.min.css添加到我的react项目中,有人知道如何做吗?因为没有太多关于如何做的文档,或者我只是瞎了眼,看不见 谢谢 编辑:我试过在我的index.html头部,但它不起作用 var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { cont

我真的很难将一个自定义bootstrap.min.css添加到我的react项目中,有人知道如何做吗?因为没有太多关于如何做的文档,或者我只是瞎了眼,看不见

谢谢

编辑:我试过在我的index.html头部,但它不起作用

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 
                    'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false 
           }),
  ],
};
那是我的网页

我不确定什么是最好的css加载器,如果有人可以建议一个将是伟大的

编辑2

<div className="container" style={backImg}>
                <div className="row" style={slidePadding}>
                    <div className="col-md-12 well well-lg">
                        <div className="row">
                            <div className="col-md-12">
                                <h4>Thinking load from £200 to £3,000? Thinking of repaying from 6 - 24 months? </h4><br />
                                <Horizontal />
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <p>&nbsp;</p>
                            </div>
                        </div>
                        <div className="row">
                            <div  className="col-md-12">
                                <p>Representative Example. Borrow £1,250 - 15 monthly repayments of £166.66. Total cost of credit £1,249.90 which is £1,249.90 interest at 122.96% pa fixed. Total amount repayable £2,499.90. Representative 233.6% APR.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

从200英镑到3000英镑不等?考虑在6-24个月内还款

有代表性的例子。借款1250英镑-15个月还款166.66英镑。信贷总成本为1249.90英镑,即1249.90英镑,固定年利率为122.96%。应偿还总额为2499.90英镑。代表:4月233.6%

这是你登陆的地点的主要部分


这基本上就是我希望css能够处理的地方,我希望能够更改所有宽度,并且以内联方式进行操作将非常可怕,因此css文件是您必须在组件(JS)文件中导入文件路径的唯一方法。例如:

import a from "../styles/bootstap.min.css";

您必须导入组件(JS)文件中的文件路径。例如:

import a from "../styles/bootstap.min.css";

我自己解决了我需要做的是在我的index.html中添加

<link href="./js/styles/bootstrap.min.css" rel="stylesheet">
然后在webpack.config.js中添加

loader: 'babel-loader', 'ignore-loader', 

忽略加载程序部分,它告诉巴贝尔不要传输css文件

我自己解决了问题,我需要做的是在我的index.html中添加

<link href="./js/styles/bootstrap.min.css" rel="stylesheet">
然后在webpack.config.js中添加

loader: 'babel-loader', 'ignore-loader', 

忽略加载程序部分,它告诉babel不要传输css文件

您只需将css文件导入应用程序的根目录中即可。 查看应用程序的根目录,然后在那里导入文件。 比如: 导入“../pathToTheFile”;
就这样。

您只需在应用程序的根目录中导入css文件。 查看应用程序的根目录,然后在那里导入文件。 比如: 导入“../pathToTheFile”;
就是这样。

在索引的
标题中
。html1只需像其他项目一样包含CSS,因为它的react不会使它有任何不同。您必须导入文件路径。例如=>从“./styles/bootstap.min.css”导入;在index.html1的
头部
中,只需像对待任何其他项目一样包含CSS,因为它是react,所以不会有任何不同。您必须导入文件路径。例如=>从“./styles/bootstap.min.css”导入;然后我如何调用@Vinay Gayakwadit给了我一个未捕获的错误:找不到模块“./bootstap.min.css”我将它导入到我的client.js中,这是我的主js文件导入后,您可以在DOM元素中添加普通的类名。但是请注意,在ReactJS中,类的属性必须替换为“className”。例如=>这里活动的是在css文件中定义的类。希望我是清楚的。找不到模块意味着你给出的路径是错误的。这是相对路径。因此,您必须准确地检查文件位置,并根据它进行修改。我的例子只是为了理解。精确的代码不起作用。您可能需要根据您的文件结构进行修改。我已经做了,并指出了它的确切位置。我必须尝试处理它,感谢您的澄清。然后我如何称呼@Vinay Gayakwadit给我一个未捕获的错误:找不到模块。“/bootstap.min.css”我将它导入了我的client.js,这是我的主js文件。导入后,您可以在DOM元素中添加普通的类名。但是请注意,在ReactJS中,类的属性必须替换为“className”。例如=>这里活动的是在css文件中定义的类。希望我是清楚的。找不到模块意味着你给出的路径是错误的。这是相对路径。因此,您必须准确地检查文件位置,并根据它进行修改。我的例子只是为了理解。精确的代码不起作用。您可能需要根据您的文件结构进行修改。我已经做了,并指出了它的确切位置。我必须尝试并处理它,感谢您的澄清