"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[229],{7657:(s,n,a)=>{a.r(n),a.d(n,{data:()=>e});const e={key:"v-884fd4bc",path:"/guide/css.html",title:"使用 css",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"全局样式",slug:"全局样式",children:[]},{level:2,title:"组件内样式",slug:"组件内样式",children:[]},{level:2,title:"引入第三方样式",slug:"引入第三方样式",children:[]},{level:2,title:"CSS Modules",slug:"css-modules",children:[]},{level:2,title:"CSS 预处理器",slug:"css-预处理器",children:[]}],filePathRelative:"guide/css.md",git:{updatedTime:1664436338e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},8568:(s,n,a)=>{a.r(n),a.d(n,{default:()=>m});var e=a(6252);const t=(0,e.uE)('

使用 css

提示

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

全局样式

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

比如用于覆盖样式，

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

1
2
3

组件内样式

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

1
2
3
4
5

引入第三方样式

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

// src/app.js\nimport 'bootstrap/dist/css/bootstrap.css'\n

1
2

CSS Modules

',12),c=(0,e.Uk)("支持 "),l=(0,e._)("code",null,"Vue",-1),p=(0,e.Uk)(" 的 "),o={href:"https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},r=(0,e.Uk)("CSS Modules"),i=(0,e.Uk)(" 用法，可以直接使用："),u=(0,e.uE)('

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

1
2
3
4

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

import style from '@/styles/index.module.css'\nconsole.log(style)\n

1
2

CSS 预处理器

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

',5),d={},m=(0,a(3744).Z)(d,[["render",function(s,n){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[t,(0,e._)("p",null,[c,l,p,(0,e._)("a",o,[r,(0,e.Wm)(a)]),i]),u],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,e]of n)a[s]=e;return a}}}]);

# 使用 css

# 全局样式

# 组件内样式

# 引入第三方样式