静态资源

Taro静态资源

在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 "../https://assets.ng-tech.icu/book/Andrew-Ng-DeepLearning-AI/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 中进行修改，配置位于 mini.postcss。具体配置如下

// 小程序端样式引用本地资源内联
url: {
  enable: true,
  config: {
    limit: 10240 // 设定转换尺寸上限
  }
}

最近更新于0001-01-01