靜態資源引用
在 Taro 中可以像使用 Webpack 那樣自由地引用靜態資源,而且不需要安裝任何 Loaders。
引用樣式文件
可以直接通過 ES6 的 import
語法來引用樣式文件
例如引用 CSS 文件
import './css/path/name.css'
引用 SCSS 文件
import './css/path/name.scss'
引用 JS 文件
可以直接通過 ES6 的 import
語法來引用 JS 文件
import { functionName } from './css/path/name.js'
import defaultExportName from './css/path/name.js'
引用圖片、音頻、字體等文件
可以直接通過 ES6 的 import
語法來引用此類文件,拿到文件引用後直接在 JSX 中進行使用
// 引用文件
import namedPng from '../../images/path/named.png'
// 使用
<View>
<Image src={namedPng} />
</View>
引用 JSON 文件
可以直接通過 ES6 的 import
語法來引用此類文件,拿到 JSON 文件輸出的 JSON 數據
// 引用 json 文件
/**
* named.json
* {
* x: 1
* }
**/
import namedJson from '../../json/path/named.json'
console.log(namedJson.x)
小程序樣式中引用本地資源
在小程序的樣式中,默認不能直接引用本地資源,只能通過網絡地址、Base64 的方式來進行資源引用,爲了方便開發,Taro 提供了直接在樣式文件中引用本地資源的方式,其原理是通過 PostCSS
的 postcss-url
插件將樣式中本地資源引用轉換成 Base64 格式,從而能正常加載。
Taro 默認會對 10kb
大小以下的資源進行轉換,如果需要修改配置,可以在 config/index.js
中進行修改,配置位於 weapp.module.postcss
。
具體配置如下
// 小程序端樣式引用本地資源內聯
url: {
enable: true,
config: {
limit: 10240 // 設定轉換尺寸上限
}
}