图片与样式

本章节针对各样式和图片资源的引用进行描述。

# 使用 css / less

# 全局样式

Fes.js 中约定 src/global.less 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。

比如用于覆盖样式，

.layout-content {
  max-width: 1000px;
}

# 组件内样式

<style>
.layout-content {
  max-width: 1000px;
}
</style>

# 引入第三方样式

可以直接通过 import 引入第三方组件，当然最好在入口文件app.js中引入

// src/app.jsx
import 'bootstrap/dist/css/bootstrap.css'

# CSS Modules

支持 Vue 的 CSS Modulesopen in new window 用法，可以直接使用：

<style module>
.layout-content {
  max-width: 1000px;
}

如果想直接引入CSS文件的话，则CSS文件名需要包含.module，比如：

import style from '@/styles/index.module.css'
console.log(style)

# 使用图片

假设在 src/images 目录下有 logo.png。

# Vue 里使用图片

<template>
    <img src="@/images/logo.png`" />
</template>

# JS 里使用图片

import imageUrl from '@/images/logo.png`';

# CSS 里使用图片

.logo {
    background: url('@/images/logo.png');
}

# public 文件夹

有些内容不需要经过模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。

# 在 HTML 模板中使用

在 index.html 中需要设置：

<link rel="icon" href="<%= BASE_URL %>favicon.ico" />

# 在.vue 文件中使用

<template>
    <img :src="`${publicPath}my-image.png`" />
</template>
<script>
export default {
    setup() {
        return {
            publicPath: process.env.BASE_URL,
        };
    },
};
</script>