react link引入外部css样式的坑

最新推荐文章于 2022-10-08 16:51:25 发布
最新推荐文章于 2022-10-08 16:51:25 发布
阅读量1.2k 收藏
点赞数
文章标签： javascript 爬虫 json ViewUI
原文链接：http://www.cnblogs.com/xinzaimengzai/p/9952999.html
版权

刚开始的代码是这样的，使用react router4.x写的demo路由跳转后，页面的没有渲染，是因为没有引入外部css文件（或者说引入外部文件路径错误）

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>React App</title>
    
    <link rel="stylesheet" href="./css/bootstrap.css">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

 将上面代码（红色部分）的点去掉就可以了，如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>React App</title>
    
    <link rel="stylesheet" href="/css/bootstrap.css">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

 

转载于:https://www.cnblogs.com/xinzaimengzai/p/9952999.html

a50270
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react中使用css的7中方式(最全总结)
12-09
这是最基础的方法，无需引入外部CSS文件。在组件内部创建一个JavaScript对象，将CSS属性映射到对象的键值对上，然后将其赋值给`style`属性。例如： ```jsx const div1 = { width: "300px", margin: "30px auto...
React 学习笔记 —— React 脚手架
叹之
04-03 291
安装使用 全局安装 npm install -g create-react-app 创建项目 create-react-app hello-react 启动项目 cd hello-react npm start 文件目录解读 .git：git 管理文件 node_moudles: node 模块 public：公共资源 src：代码主要写在这里面 .gitignore: git的忽略文件，描述哪些文件不用管理 package.json：node 包的配置文件，描述应用信息、命令等 RE
html页面meta解释
开发路上的AZhe
07-20 240
参考文档：https://zhuanlan.zhihu.com/p/29675248
react如何引入css
qf2019的博客
07-23 3938
引入方法有：1、行内样式；2、声明样式，行内样式类似，区别只是声明一个变量保存样式表绑定给style属性；3、import引入，React组件一般是一个文件夹，文件夹里包含对应的js和css，只要在js中引入同级的css即可。 在React中，如果直接按上面的方式写内联样式会直接报错，因为JSX语法不支持，React支持以下三种写css的方法： 1.行内样式 2.声明样式 声明样式和行内样式类似，区别只是声明一个变量保存样式表绑定给style属性。 3.import引入 一个React组件一般就是一个
React之改变页面上方标题与图标（简单粗暴）
qq_36330296的博客
07-25 8770
React之改变页面上方标题与图标（简单粗暴） react.js 716 次阅读 · 读完需要 2 分钟 0 使用create react app命令得到的React项目会有默认的页面标题与图标，怎么修改呢？ 一、修改图标： 打开打包后的build文件夹的index.html 找到：<link rel="shortcut icon" href="/favicon.ic...
web css实现整站样式互相切换
09-04
2. **在HTML中引入样式表**：在HTML文件的`<head>`部分，使用`<link>`标签引入这些样式表，并为其添加`title`属性，以便在JavaScript中引用。例如： ```html <link rel="stylesheet" type="text/css" id="maincss...
react-react开发的网易云音乐
08-15
4. **传统CSS文件**：在外部CSS文件中编写样式，然后通过link标签引入到React应用中。 项目名称“neteaseCloud-master”表明项目可能包含了整个网易云音乐应用的源码。在实际的项目结构中，我们通常会看到以下目录...
应用程序样式：存储CSS文件和字体样式，插件和其他文件
02-21
3. **外部样式表**：将CSS代码保存为单独的`.css`文件，然后在HTML中通过`<link>`标签引用。这是最常见的方式，可实现代码复用，便于管理和更新。 字体样式在应用程序中扮演着重要的角色，它影响着文本的可读性和...
web css实现整站样式切换
06-07
1. 外部样式表：将CSS代码放在单独的文件中（如style.css），通过`<link>`标签引入到HTML中，便于管理和切换。 2. JavaScript操作：通过JS动态改变`<link>`标签的`href`属性，或者直接修改`<style>`标签内的CSS代码...
React攻略秘籍二:React中使用css的五种方法（包括less与styled-compenents）
前端
10-08 5673
本文主要讲述了css在react的多种使用的方法。
React学习（四）——样式设置和CSS文件引入
热门推荐
daxiazouyizou的博客
03-30 4万+
    大家好，我是凯文，本篇文章介绍在React项目中设置元素样式以及引入CSS文件的方法，供各位参考。    在学习React框架之前，许多人应该已经熟悉了如何在html文件中使用css样式，这里再作一下说明，CSS样式分为3种形式：    1、内联式（行内样式）   直接在标签内部声明样式                &lt;div style=" color:red; font-size...
react中使用css的7中方式(应该是最全的)
weixin_33834910的博客
02-10 447
第一种: 在组件中直接使用style 不需要组件从外部引入css文件，直接在组件中书写。 import React, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014...
React脚手架项目路径解析
微笑的丁总的个人博客
01-31 994
先来一张路径图： 1.README.md文件为项目的注释文件 2.package.json为项目的包文件，主要包含项目的依赖项以及启动方式等，与node_modules相辅相成 3..gitignore为项目的不能上传到git仓库的排除项目 4.src为项目的工作目录，项目的源码目录 index.html对应的js文件为index.js，而index.js引用了App.js(2级) ...
iframe使用
前端菜鸟
04-10 2708
主页面 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=
Html Meta 标签
lq_07a的博客
05-05 1551
Html Meta 标签 标签定义及使用说明 元数据（Metadata）是数据的数据信息。 <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。 ...
HTML5的 meta 标签 使用汇总
在下魔王ii的博客
06-11 7930
2020-06-11 各大网站前端界面中的<meta>标签 Meat对象代表HTML的一个元素，提供HTML元素的元信息，比如描述、关键字、刷新频率。对象属性： content 设置或返回元素的content属性 httpEquiv 把content属性连接到一个HTTP头部 name 把content属性连接到某个名称 scheme 设置或返回用于解释content属性的格式 百度主页 阿里主页 美团主页 滴滴主页 字节跳动 淘宝主页 京东主页 华为主页 微..
百度地图--获取自定义区域JSON数据（下）
cc_百川
10-22 1万+
基于百度地图的自定义区域绘图–绘制区域 基于上一篇的尊卑工作后，开始正式绘图： 第一步：创建react项目（我的目录结构如图） &amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp; &amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp; &amp;amp;amp;amp;amp;amp;amp;nb
爬虫初步
theArcticOcean
06-25 1058
爬虫是什么？一段自动抓取互联网信息的程序爬虫的价值：获取想要的互联网数据简单爬虫架构：爬虫调度端（监视爬虫的运行情况） URL管理器 (管理没有爬取的URl, 已经爬取的URl) 网页下载器（如urllib2) 网页解析器（如BeautifulSoup，提取出有价值的信息)URL管理器有内存、关系数据库、缓存数据库三种途径实现管理网页下载器urllib2（官方基础模块）、requests（
使用外部的CSS文件：可以在组件中使用<link>标签引入外部的CSS文件，然后在组件中使用className属性来指定对应的样式类示例代码
最新发布
04-28
如下所示： ```jsx import React from 'react'; import './styles.css'; // 引入外部的CSS文件 function MyComponent() { return ( <div className="my-component"> <h1 className="title">Hello World</h1> <p className="description">This is my component.</p> </div> ); } export default MyComponent; ``` 在上面的代码中，我们先引入了外部的CSS文件 `styles.css`，然后在组件中使用了 `className` 属性来指定对应的样式类。其中，`my-component`、`title` 和 `description` 都是在 `styles.css` 中定义的样式类。这样，我们就可以方便地在组件中使用外部的CSS样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值