wepy是一款基于小程序的組件化開發框架。與小程序相比,wepy可以更加便捷地進行開發,并且具有很高的靈活性。在wepy的項目中,我們也可以使用外部的css文件來定義頁面的樣式。
使用外部的css文件可以將樣式與組件的邏輯代碼分離,使項目更加易于維護和擴展。我們可以在wepy的wpy文件中使用import
語句來引入外部的css文件,然后在頁面中使用類名來引用其中的樣式。
以下是一個簡單的例子:
<template> <view class="container"> <view class="title">Hello world!</view> </view> </template> <script> import wepy from 'wepy'; import './index.css'; export default class Index extends wepy.page { // ... } </script>
在上述代碼中,我們首先使用import
語句來引入了一個名為index.css
的外部樣式文件。然后在頁面中,我們使用class="container"
來應用了這個文件中定義的.container
樣式,使用class="title"
來應用.title
樣式。
需要注意的是,wepy的樣式引入與小程序不同,不能直接使用import
引入樣式文件,也不能在wxml文件中使用<link>
標簽引入樣式文件。我們需要在wpy文件中使用import
語句來引入樣式文件,同時需要在webpack的配置文件中做出相應的修改,以便讓webpack能夠正確地打包樣式文件。
上一篇xml中用css制作簡歷
下一篇css選擇框輸入框樣式