前言
有时候我们需要手动往项目中导入一些外部的js或css代码，以加快项目的开发进度，这时候可以有两种方式来实现外部js和css的引用：
一、将js和css放到public目录下
1.引用js的具体步骤如下：
（1）现在public下新建一个js文件，例如叫做exercise.js
（2）然后将需要引入的外部js代码复制，粘贴到这个exercise.js中
（3）保存后，在相应的html页面，通过script标签以及src即可引用该js
如:
<script>src="/exercise.js"</script>
放在public目录下的文件可以直接使用"/"来引用，也可以写完整的路径，如"/public/"来引用
2.引用css的具体步骤如下：
（1）现在public下新建一个css文件，例如叫做exercise.css
（2）然后将需要引入的外部js代码复制，粘贴到这个exercise.css中
（3）保存后，在相应的html页面，通过link标签以及href即可引用该css
如:
<link href="exercise.css" >
注意：
如果你想要全局引用，那么就在布局文件如application.html.erb（或其他布局文件中）使用link来引用css文件，使用script引用js文件即可
二、将js和css放到assets中
1.引用js的具体步骤如下：
（1）现在app/assets/javascripts下新建一个js文件，例如叫做exercise.js
（2）然后将需要引入的外部js代码复制，粘贴到这个exercise.js中
（3）保存后，然后在application.js中通过require进行引用
如:
//= require exercise.js
2.引用css的具体步骤如下：
（1）现在app/assets/stylesheets下新建一个css文件，例如叫做exercise.css
（2）然后将需要引入的外部js代码复制，粘贴到这个exercise.css中
（3）保存后，在application.css中通过require进行引用
如:
*= require exercise.css
这样布局文件layouts/applicaiton.html.erb会通过stylesheet_link_tag 'application'和javascript_include_tag 'application'分别找到application.js和application.css进行调用。相应的代码可以在app/views/layouts/application.html.erb中看到：
<%= stylesheet_link_tag 'application', media: 'all',%>
<%= javascript_include_tag 'application',%>
这样将这些外部css和js也被调用了
三、补充
1.遇到那种通过链接引用的js或css，最好直接复制下来存放在本地，例如:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
从其中我们可以看到netdna.bootstrapcdn.com或code.jquery.com这样的网址格式，这些都是从别人的服务器上直接引用css或js的，虽然说方便，但是一旦别人的服务器停止运行，自己的项目页面也就崩溃了，因此最好是打开这些页面，将其中css或js内容复制粘贴到本地新建的css或js中
注意复制链接把前面的'//'去掉，然后粘贴到浏览器的网址栏即可打开链接，查看相应的代码
2.如果要是引用scss文件，那么需要用@import而不是使用*= require这样的格式
3.有时候在public目录新建js或css并引用没有问题，但是将js或css迁移到app/assets中就发生了js的报错：
image
原因可能是复制过来的js代码可能由于被压缩成一行而出现了问题
4.注意stylesheet_link_tag和javascript_include_tag这两行代码在布局文件中的位置
<head>
<title>Management</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
这两行代码控制的是项目中的js和css加载，但是它的位置一定要放在布局文件内部的上方，导入的外部css和js一定要放在它们的下方。因为rails在执行stylesheet_link_tag和javascript_include_tag是会覆盖掉原有的css和js，因此将它们放在上方，就不会覆盖掉外部导入的css和js。
而如果将它们放在外部的css和js的下方，它们就会覆盖掉这些css和js的效果，下面展示了一个实例:
image
页面的效果为:
image
而将外部css和js放到stylesheet_link_tag和javascript_include_tag的下方，效果就正常了:
image
image
网友评论