引用外部js和css到项目中

前言

有时候我们需要手动往项目中导入一些外部的js或css代码，以加快项目的开发进度，这时候可以有两种方式来实现外部js和css的引用：

1.引用js的具体步骤如下： （1）现在public下新建一个js文件，例如叫做exercise.js （2）然后将需要引入的外部js代码复制，粘贴到这个exercise.js中 （3）保存后，在相应的html页面，通过script标签以及src即可引用该js 如:

放在public目录下的文件可以直接使用"/"来引用，也可以写完整的路径，如"/public/"来引用

2.引用css的具体步骤如下： （1）现在public下新建一个css文件，例如叫做exercise.css （2）然后将需要引入的外部js代码复制，粘贴到这个exercise.css中 （3）保存后，在相应的html页面，通过link标签以及href即可引用该css 如:

注意： 如果你想要全局引用，那么就在布局文件如application.html.erb（或其他布局文件中）使用link来引用css文件，使用script引用js文件即可

1.引用js的具体步骤如下： （1）现在app/assets/javascripts下新建一个js文件，例如叫做exercise.js （2）然后将需要引入的外部js代码复制，粘贴到这个exercise.js中 （3）保存后，然后在application.js中通过require进行引用 如:

2.引用css的具体步骤如下： （1）现在app/assets/stylesheets下新建一个css文件，例如叫做exercise.css （2）然后将需要引入的外部js代码复制，粘贴到这个exercise.css中 （3）保存后，在application.css中通过require进行引用 如:

这样布局文件layouts/applicaiton.html.erb会通过stylesheet_link_tag 'application'和javascript_include_tag 'application'分别找到application.js和application.css进行调用。相应的代码可以在app/views/layouts/application.html.erb中看到：

这样将这些外部css和js也被调用了

1.遇到那种通过链接引用的js或css，最好直接复制下来存放在本地，例如:

从其中我们可以看到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的报错：

这两行代码控制的是项目中的js和css加载，但是它的位置一定要放在布局文件内部的上方，导入的外部css和js一定要放在它们的下方。因为rails在执行stylesheet_link_tag和javascript_include_tag是会覆盖掉原有的css和js，因此将它们放在上方，就不会覆盖掉外部导入的css和js。 而如果将它们放在外部的css和js的下方，它们就会覆盖掉这些css和js的效果，下面展示了一个实例:

页面的效果为:

而将外部css和js放到stylesheet_link_tag和javascript_include_tag的下方，效果就正常了: