Ionic3 如何打包引入第三方css文件

html-css012

Ionic3 如何打包引入第三方css文件,第1张

当引入非Ionic标准插件时,会碰到需要独立引入JS与CSS文件。

JS相对比较容易,但CSS需要修改打包配置文件。

修改package.json, 定义我们自定义的copy配置文件

"config": {

"ionic_copy": "./config/copy.config.js"

},

在工程根目录下新建config目录,添加copy.config.js文件,

文件中写入:

module.exports = {

copyCropperjs: {

src: ["{{ROOT}}/node_modules/cropperjs/dist/cropper.min.css"],

dest: "{{BUILD}}"

}

}

最后在index.html中引入相应的css即可。

<link rel="stylesheet" href="build/cropper.min.css">

CSS样式的引用方式有三种:

一、行间样式表

行间样式表是指将CSS样式编码写在HTML标签中,格式如下

<h1 style="font-size:12pxcolor:#000FFF">

我的CSS样式。

</h1>

行间样式表由HTML元素的HTML元素的style支持,只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式,但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。

二、内部样式表

内部样式表与行间样式表相似都是把CSS代码写在HTML页面中,稍微不同的是前者可以将样式表放在一个固定的位置,格式如下

<html>

<head>

<title>内部样式表</title>

<style type="text/css">

h1{font-size:12px

color:#000FFF

}

</style>

</head>

<body>

<h1>我的CSS样式。</h1>

</body>

</html>

内部样式表编码是初级的应用形式,不能达到跨页面使用所以不适合使用。

三、外部样式表

外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用一个样式文件表,这样能够实现代码的最大限度的重用及网站文件的最优化配置,格式如下

<html>

<head>

<title>外部样式表</title>

<link rel="stylesheet" rev="stylesheet" href="style.css">

</head>

<body>

<h1>我的CSS样式。</h1>

</body>

</html>

在style.css中的代码为

h1{font-size:12px

color:#000FFF

}

我们在<head>中使用了<link>标签来调用外部样式表文件。将link指定为stylesheet方式,并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。

1.page.html文件里写ionic提供的控件,比如:ion-header,ion-content, ion-title,ion-toobar,经管如此,有时候满足不了项目的界面,我们需要结合HTML的基本命令来完成设计,比如:div,p, img,a,等。

2.scss使用经验:每个页面都有自己的scss文件,我在使用时,发现几个页面的css定义会影响,就是页面2可以用页面1的css定义造成干扰的现象,后来发现,每个scss文件里有个页面定义,我们只要把当前页面的css定义放在这个页面定义就行,实现了css分离。()本人刚学习网页编程,一切都在探索中)。示例如下:

age-page3 {

.page {

display: flex

align-items: center

text-align: center

margin: 0 auto

height: 100%

ackground-color: #abaaaa

adding-top: 5px

adding-bottom: 5px

// margin-top: 2px

这个page属性就放在了page-page3的大括号里面,保证了这个css定义只影响当前页面。

另外就是,平