uniapp怎么引入外部css文件-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

uniapp怎么引入外部css文件

随着前端技术的持续发展，越来越多的开发者开始使用uni-app进行跨平台开发。而其中一个必不可少的功能就是引入外部的CSS文件，以便更好地定制页面的样式。那么，在uni-app中，我们应该如何引入外部的CSS文件呢？本篇文章将为您一一详细介绍。

一、在Vue组件中引入外部CSS文件

在uni-app中，我们可以使用Vue组件来构建页面。因此，我们可以直接在Vue组件中引入外部的CSS文件。

首先，在项目的根目录下创建一个新的CSS文件，例如styles.css。接着，在需要引入CSS的Vue组件中，使用import语句引入该CSS文件：

<template>  <!-- your template code here --></template><script>  import '@/styles.css'  // your script code here  export default {    name: 'your-component-name'  }</script><style scoped>  /* your component's style code here */</style>

登录后复制

在上面的代码中，我们首先通过import语句引入了styles.css文件，然后在Vue组件的script标签中使用该样式。需要注意的是，由于在Vue组件中使用的是scoped样式，所以styles.css中的样式只会被应用在当前组件中。

二、在HTML页面中引入外部CSS文件

除了在Vue组件中使用外部CSS文件，我们还可以在HTML页面中直接引入。这种方法适用于需要在多个Vue组件中共享同一份样式的情况。

首先，我们同样需要在项目的根目录下创建一个新的CSS文件，例如styles.css。接着，在HTML页面中使用link标签引入该CSS文件：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>My uni-app project</title>  <link rel="stylesheet" href="/styles.css"></head><body>  <div id="app"></div>  <script src="/uni.js"></script></body></html>

登录后复制

在上面的代码中，我们使用link标签引入了styles.css文件，并将其放在了head标签中。需要注意的是，这里的href属性中的路径是以项目根目录为相对路径的。

此外，如果需要引入外部CDN链接的CSS库，我们也可以在HTML页面中直接引入：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>My uni-app project</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"></head><body>  <div id="app"></div>  <script src="/uni.js"></script></body></html>

登录后复制

在上面的代码中，我们使用了Bootstrap的CDN链接，并通过link标签将其引入到HTML页面中。

总结

在uni-app中，我们可以通过在Vue组件或HTML页面中引入外部的CSS文件来定制页面的样式。引入方法也有两种：在Vue组件中使用import语句或在HTML页面中使用link标签。同时，我们也可以引入外部CDN链接的CSS库。希望本篇文章能够为大家在uni-app中引入CSS文件提供帮助。

以上就是uniapp怎么引入外部css文件的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~