import{_ as t,r as c,o,c as d,b as a,d as s,a as i,f as n}from"./app.bd9c95b7.js";const l={},p=n(`

使用 css

提示

本文档以 css 为示例，把后缀换成 .less 同样适用。

全局样式

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

比如用于覆盖样式，

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

组件内样式

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

引入第三方样式

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

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

CSS Modules

`,12),r=a("code",null,"Vue",-1),u={href:"https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},v=n(`

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

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

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

CSS 预处理器

Fes.js 内置支持 less，不支持 sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 fes-plugin 插件的形式支持。

`,5);function m(h,k){const e=c("ExternalLinkIcon");return o(),d("div",null,[p,a("p",null,[s("支持 "),r,s(" 的 "),a("a",u,[s("CSS Modules"),i(e)]),s(" 用法，可以直接使用：")]),v])}const b=t(l,[["render",m],["__file","css.html.vue"]]);export{b as default};

# 使用 css

# 全局样式

# 组件内样式

# 引入第三方样式