Taro 靜態(tài)資源引用

引用樣式文件

可以直接通過(guò) ES6 的 import 語(yǔ)法來(lái)引用樣式文件

例如引用 CSS 文件

import './css/path/name.css'

引用 SCSS 文件

import './css/path/name.scss'

引用 JS 文件

可以直接通過(guò) ES6 的 import 語(yǔ)法來(lái)引用 JS 文件

import { functionName } from './css/path/name.js'
import defaultExportName from './css/path/name.js'

引用圖片、音頻、字體等文件

可以直接通過(guò) ES6 的 import 語(yǔ)法來(lái)引用此類文件，拿到文件引用后直接在 JSX 中進(jìn)行使用

// 引用文件
import namedPng from '../../images/path/named.png'
// 使用
<View>
  <Image src={namedPng} />
</View>

引用 JSON 文件

可以直接通過(guò) ES6 的 import 語(yǔ)法來(lái)引用此類文件，拿到 JSON 文件輸出的 JSON 數(shù)據(jù)

// 引用 json 文件
/**
* named.json
* {
*   x: 1
* }
**/
import namedJson from '../../json/path/named.json'
console.log(namedJson.x)

小程序樣式中引用本地資源

在小程序的樣式中，默認(rèn)不能直接引用本地資源，只能通過(guò)網(wǎng)絡(luò)地址、Base64 的方式來(lái)進(jìn)行資源引用，為了方便開(kāi)發(fā)，Taro 提供了直接在樣式文件中引用本地資源的方式，其原理是通過(guò) PostCSS 的 postcss-url 插件將樣式中本地資源引用轉(zhuǎn)換成 Base64 格式，從而能正常加載。

Taro 默認(rèn)會(huì)對(duì) 1kb 大小以下的資源進(jìn)行轉(zhuǎn)換，如果需要修改配置，可以在 config/index.js 中進(jìn)行修改，配置位于 weapp.module.postcss。

具體配置如下

// 小程序端樣式引用本地資源內(nèi)聯(lián)
url: {
  enable: true,
  config: {
    limit: 10240 // 設(shè)定轉(zhuǎn)換尺寸上限
  }
}