如何将自定义css导入reactjs项目
Posted
技术标签:
【中文标题】如何将自定义css导入reactjs项目【英文标题】:how to import custom css to reactjs project 【发布时间】:2017-11-26 23:56:30 【问题描述】:我真的很难将自定义 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
),
],
;
这就是我的 webpack
如果有人可以推荐一个很棒的 CSS 加载器,我不确定最好的 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> </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>
这是您登陆网站的主要部分
这基本上是我希望 css 工作的地方
【问题讨论】:
在 index.html 的head
中
只需像在任何其他项目中一样包含 CSS,只是因为它的反应并没有使它有任何不同。
您必须导入文件路径。例如 => 从 "../styles/bootstap.min.css" 导入一个;
【参考方案1】:
您只需在应用的根目录中导入 css 文件。 查看您的应用程序的根目录,然后将文件导入那里。 喜欢 : 导入'../pathToTheFile'; 就是这样。
【讨论】:
【参考方案2】:自己解决了我需要做的是在我的 index.html 中添加
<link href="./js/styles/bootstrap.min.css" rel="stylesheet">
然后安装
npm install --save-dev ignore-loader
然后在 webpack.config.js 中添加
loader: 'babel-loader', 'ignore-loader',
ignore-loader 部分,它告诉 babel 不要转译 css 文件
【讨论】:
【参考方案3】:您必须在组件(JS)文件中导入文件路径。例如:
import a from "../styles/bootstap.min.css";
【讨论】:
那我怎么称呼@Vinay Gayakwad 它给了我一个未捕获的错误:找不到模块“../bootstap.min.css”我将它导入到我的主 js 文件的 client.js 中 导入后可以在 DOM 元素中添加普通的类名。但请注意,在 ReactJS 中,类的属性必须替换为“className”。例如 => 这里 active 是您在 css 文件中定义的类。希望我很清楚。 找不到模块意味着你给的路径是错误的。是相对路径。所以你必须准确检查文件位置并根据它进行修改。我的例子只是为了理解。确切的代码不起作用。您可能需要根据您的文件结构进行修改。 我已经完成并指出了它的确切位置,必须尝试弄乱它,感谢您的澄清以上是关于如何将自定义css导入reactjs项目的主要内容,如果未能解决你的问题,请参考以下文章
Django Allauth - 如何将自定义 CSS 类添加到字段?
如何将自定义标量导入 NestJs 中的 .graphql 文件?
在 ExtJS 中,如何将自定义 CSS 类添加到数据网格行?
如何将自定义类导入 Flex 中的 mxml 文件? (动作脚本 3)
如何使用 Azure Synapse Analytics 将自定义 Python 库导入到 Apache Spark 池中?