1"use strict";(self.webpackChunkfarm_docs=self.webpackChunkfarm_docs||[]).push([[7072],{96513:(s,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>c,toc:()=>t});var r=n(49214),o=n(36906);const i={},l="Css/Sass/Less",c={id:"features/css",title:"Css/Sass/Less",description:"Farm support Css out of box, just import the css file:",source:"@site/docs/features/css.md",sourceDirName:"features",slug:"/features/css",permalink:"/docs/features/css",draft:!1,unlisted:!1,editUrl:"https://github.com/farm-fe/farm-fe.github.io/tree/main/docs/features/css.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Html",permalink:"/docs/features/html"},next:{title:"TS/TSX",permalink:"/docs/features/script"}},a={},t=[{value:"Css Modules",id:"css-modules",level:2},{value:"Css Pre-Processor",id:"css-pre-processor",level:2},{value:"Sass",id:"sass",level:3},{value:"Less",id:"less",level:3},{value:"Postcss",id:"postcss",level:3},{value:"Css Prefixer",id:"css-prefixer",level:2}];function d(s){const e={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.header,{children:(0,r.jsx)(e.h1,{id:"csssassless",children:"Css/Sass/Less"})}),"\n",(0,r.jsx)(e.p,{children:"Farm support Css out of box, just import the css file:"}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",children:"import './index.css';\n"})}),"\n",(0,r.jsx)(e.p,{children:"Then farm will auto enable HMR for css module, and generating bundled resources for css."}),"\n",(0,r.jsx)(e.h2,{id:"css-modules",children:"Css Modules"}),"\n",(0,r.jsxs)(e.p,{children:["Farm support css modules out of box, the modules end with ",(0,r.jsx)(e.code,{children:".module.css|less|scss|sass"})," will be treated as css modules by default."]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-tsx",metastring:'title="comp.tsx"',children:"// ...\nimport styles from './index.module.css'\n\nexport function Comp() {\n return <div className={styles.main}>Main</div>\n}\n"})}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-css",metastring:'title="index.module.css"',children:".main {\n color: green;\n}\n"})}),"\n",(0,r.jsxs)(e.p,{children:["You can configuring css modules by ",(0,r.jsx)(e.a,{href:"/docs/config/compilation-options#cssmodules",children:(0,r.jsx)(e.code,{children:"css.modules"})}),". for example you can set ",(0,r.jsx)(e.code,{children:"css.modules.paths"})," to ",(0,r.jsx)(e.code,{children:"['.css|sass|less|scss']"})," then all css files will be treated as css modules."]}),"\n",(0,r.jsx)(e.h2,{id:"css-pre-processor",children:"Css Pre-Processor"}),"\n",(0,r.jsx)(e.p,{children:"Farm provide official sass, less, postcss plugins to support css pre-processor."}),"\n",(0,r.jsx)(e.h3,{id:"sass",children:"Sass"}),"\n",(0,r.jsxs)(e.p,{children:["Farm sass plugin is a Rust Plugin and use ",(0,r.jsx)(e.code,{children:"sass-embeded"}),"(we may migrate to ",(0,r.jsx)(e.a,{href:"https://github.com/connorskees/grass",children:"grass"})," in the future)."]}),"\n",(0,r.jsxs)(e.p,{children:["Steps to compile ",(0,r.jsx)(e.code,{children:"sass/scss"})," modules in Farm."]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"Install dependencies"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-sh",children:"# npm or yarn or pnpm, choose your favorite package manager\npnpm add -D @farmfe/plugin-sass\n"})}),"\n",(0,r.jsxs)(e.ol,{start:"2",children:["\n",(0,r.jsx)(e.li,{children:"Configure the plugin"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { defineConfig } from '@farmfe/core';\n\nexport default defineConfig({\n // ...\n plugins: ['@farmfe/plugin-sass'] // to use a rust plugin, just configure its package name as a string\n // if you want to specify options for plugin-sass, use\n // plugins: [\n // ['@farmfe/plugin-sass', { sourceMap: false }]\n // ]\n});\n"})}),"\n",(0,r.jsxs)(e.ol,{start:"3",children:["\n",(0,r.jsx)(e.li,{children:"Import sass module"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import './index.scss';\n"})}),"\n",(0,r.jsxs)(e.p,{children:["To use sass with css modules, change the file name from ",(0,r.jsx)(e.code,{children:"index.scss"})," to ",(0,r.jsx)(e.code,{children:"index.module.scss"}),", see ",(0,r.jsx)(e.a,{href:"/docs/config/farm-config#cssmodules",children:"css modules"}),"."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"@farmfe/plugin-sass"})," supports a lot of options, use the array syntax of ",(0,r.jsx)(e.code,{children:"plugins"})," to specify options for plugin sass:"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { defineConfig } from '@farmfe/core';
1\n\nexport default defineConfig({\n // if you want to specify options for plugin-sass, use\n plugins: [\n [\n '@farmfe/plugin-sass',\n // all supported options as below\n {\n sourceMap: true // bool\n sourceMapIncludeSources: true, // bool\n alertAscii: true, // bool\n alertColor: true, // bool\n charset: true, // bool\n quietDeps: true, // bool\n verbose: false, // bool\n style: 'expanded' | 'compressed' // output code style\n }\n ]\n ]\n});\n"})}),"\n",(0,r.jsx)(e.h3,{id:"less",children:"Less"}),"\n",(0,r.jsxs)(e.p,{children:["Farm less plugin is a Js Plugin. Steps to compile ",(0,r.jsx)(e.code,{children:"less"})," modules in Farm."]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"Install dependencies"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-sh",children:"# npm or yarn or pnpm, choose your favorite package manager\npnpm add -D @farmfe/js-plugin-less\n"})}),"\n",(0,r.jsxs)(e.ol,{start:"2",children:["\n",(0,r.jsx)(e.li,{children:"Configure the plugin"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { defineConfig } from '@farmfe/core';\nimport less from '@farmfe/js-plugin-less';\n\nexport default defineConfig({\n // ...\n plugins: [less()] // pass argument to the less function like `less({ /* your options */ })` to specify less options\n});\n"})}),"\n",(0,r.jsxs)(e.ol,{start:"3",children:["\n",(0,r.jsx)(e.li,{children:"Import sass module"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import './index.less';\n"})}),"\n",(0,r.jsxs)(e.p,{children:["To use sass with css modules, change the file name from ",(0,r.jsx)(e.code,{children:"index.less"})," to ",(0,r.jsx)(e.code,{children:"index.module.less"}),", see ",(0,r.jsx)(e.a,{href:"/docs/config/farm-config#cssmodules",children:"css modules"})]}),"\n",(0,r.jsx)(e.h3,{id:"postcss",children:"Postcss"}),"\n",(0,r.jsx)(e.p,{children:"The Farm postcss plugin is a JS plugin. The steps to introduce postcss in Farm are as follows:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsx)(e.li,{children:"Install dependencies"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-sh",children:"# npm or yarn or pnpm, choose your favorite package manager\npnpm add -D @farmfe/js-plugin-postcss\n"})}),"\n",(0,r.jsxs)(e.ol,{start:"2",children:["\n",(0,r.jsx)(e.li,{children:"Configure the plugin"}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",children:"import { defineConfig } from '@farmfe/core';\nimport postcss from '@farmfe/js-plugin-postcss';\n\nexport default defineConfig({\n //...\n plugins: [postcss()] // pass argument to the less function like `less({ /* your options */ })` to specify less options\n});\n"})}),"\n",(0,r.jsxs)(e.ol,{start:"3",children:["\n",(0,r.jsxs)(e.li,{children:["Configure ",(0,r.jsx)(e.code,{children:"postcss.config.js"})," and import the required postcss plugins"]}),"\n"]}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-js",metastring:"title=postcss.config.js",children:"module.exports = {\n plugins: [\n require('postcss-pxtorem')({\n rootValue: 16,\n propList: ['*'],\n }),\n require('tailwindcss'),\n ]\n}\n"})}),"\n",(0,r.jsx)(e.h2,{id:"css-prefixer",children:"Css Prefixer"}),"\n",(0,r.jsxs)(e.p,{children:["Farm supports css prefixer out of box, you can configure it using ",(0,r.jsx)(e.code,{children:"compilation.css.prefixer"}),"."]}),"\n",(0,r.jsx)(e.admonition,{type:"note",children:(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"css.prefix.targets"})," will be set automatically when ",(0,r.jsx)(e.a,{href:"/docs/config/compilation-options#output-targetenv",children:(0,r.jsx)(e.code,{children:"output.targetEnv"})}),". Normally set ",(0,r.jsx)(e.a,{href:"/docs/config/compilation-options#output-targetenv",children:(0,r.jsx)(e.code,{children:"output.targetEnv"})})," would be enough."]})}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-ts",metastring:'title="farm.config.ts"',children:"import { defineConfig } from '@farmfe/core';
1\n\nexport default defineConfig({\n compilation: {\n css: {\n prefix: {\n targets: ['ie >= 10']\n }\n },\n },\n});\n"})}),"\n",(0,r.jsx)(e.p,{children:"Then for input code:"}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-css",children:"div {\n display: flex;\n}\n"})}),"\n",(0,r.jsx)(e.p,{children:"output code:"}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-css",children:"div{display:-ms-flexbox;display:flex}\n"})})]})}function p(s={}){const{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(d,{...s})}):d(s)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.