Static resource references
Static resources can be freely referenced in Taro as with Webpack , and there is no need to install any Loaders.
Referencing style files
Style files can be referenced directly via ES6's import
syntax
For example, to reference a CSS file
import './css/path/name.css'
Referencing SCSS files
import './css/path/name.scss'
Referencing JS files
JS files can be referenced directly via ES6's import
syntax
import { functionName } from './css/path/name.js'
import defaultExportName from './css/path/name.js'
Referencing images, audio, fonts and other files
You can refer to such files directly through ES6's import
syntax and use them directly in JSX after getting the file reference
import namedPng from '../../images/path/named.png'
// Usage
<View>
<Image src={namedPng} />
</View>
Referencing JSON files
You can refer to such files directly through ES6's import
syntax to get the JSON data output from the JSON file
// json file
/**
* named.json
* {
* x: 1
* }
**/
import namedJson from '../../json/path/named.json'
console.log(namedJson.x)
Reference to local resources in mini-program style
In the style of the mini-program, local resources cannot be referenced directly by default, but only by means of network addresses, Base64. To facilitate development, Taro provides a way to refer to local resources directly in the style file, the principle of which is through the PostCSS
postcss-url
, The plugin converts native resource references in the style to Base64 format so that they can be loaded properly.
Taro converts resources up to 1kb
in size by default, if you need to change the configuration, you can do so in config/index.js
, which is located in weapp.module.postcss
。
The specific configuration is as follows
// mini-prgram side styles referencing local resources inline
url: {
enable: true,
config: {
limit: 10240 // Set upper limit of conversion size
}
}