fes.js/assets/css.html.f84ebf1b.js

import{_ as t,r as c,o,c as d,b as a,d as s,a as i,f as n}from"./app.136d0839.js";const l={},p=n(`<h1 id="使用-css" tabindex="-1"><a class="header-anchor" href="#使用-css" aria-hidden="true">#</a> 使用 css</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>本文档以 css 为示例，把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1"><a class="header-anchor" href="#全局样式" aria-hidden="true">#</a> 全局样式</h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式，</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.layout-content</span> <span class="token punctuation">{</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件内样式" tabindex="-1"><a class="header-anchor" href="#组件内样式" aria-hidden="true">#</a> 组件内样式</h2><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.layout-content</span> <span class="token punctuation">{</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="引入第三方样式" tabindex="-1"><a class="header-anchor" href="#引入第三方样式" aria-hidden="true">#</a> 引入第三方样式</h2><p>可以直接通过 <code>import</code> 引入第三方组件，当然最好在入口文件<code>app.js</code>中引入</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/app.js</span>
<span class="token keyword">import</span> <span class="token string">&#39;bootstrap/dist/css/bootstrap.css&#39;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-modules" tabindex="-1"><a class="header-anchor" href="#css-modules" aria-hidden="true">#</a> CSS Modules</h2>`,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(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">module</span><span class="token punctuation">&gt;</span></span>
.layout-content {
  max-width: 1000px;
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想直接引入CSS文件的话，则CSS文件名需要包含<code>.module</code>，比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> style <span class="token keyword">from</span> <span class="token string">&#39;@/styles/index.module.css&#39;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-预处理器" tabindex="-1"><a class="header-anchor" href="#css-预处理器" aria-hidden="true">#</a> CSS 预处理器</h2><p>Fes.js 内置支持 <code>less</code>，不支持 <code>sass</code> 和 <code>stylus</code>，但如果有需求，可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p>`,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};