CSS Support

Crane uses Vite and Vue for builds. CSS is processed by Vite’s pipeline and Vue SFCs. No Crane-specific CSS config; support follows Vite’s defaults and app dependencies.

Pipeline

Mechanism	Behavior
Vue SFCs	<style> in .vue files; optional lang="scss", lang="less", or plain CSS
Imports	.css, .scss, .sass, .less, .module.css imported from JS/TS are processed by Vite
PostCSS	If postcss.config.js or postcss.config.cjs exists in app root, Vite runs it on CSS

crane build does not load your app’s vite.config.js. All options below rely on Vite’s default behavior and the dependencies you install.

Section CSS shares the page with Ecwid’s storefront. To avoid CSS variable clashes, prefix your custom properties — see CSS variable conflict prevention.

Reference

Plain CSS

• Install: none

• Files: .css; <style> or <style scoped> in SFCs

• Usage: Import or inline in SFC

<style scoped>
.card { padding: 1rem; }
</style>

import './styles.css';

Sass / SCSS

• Install: npm install -D sass

• Files: .scss, .sass; SFC lang="scss" or lang="sass"

• Usage: Import or <style lang="scss" scoped>

<style lang="scss" scoped>
$primary: #3498db;
.card { background: $primary; }
</style>

import './section.scss';

Crane uses the modern Sass compiler for internal builds where applicable.

Less

• Install: npm install -D less

• Files: .less; SFC lang="less"

• Usage: Import or <style lang="less" scoped>

<style lang="less" scoped>
@primary: #3498db;
.card { background: @primary; }
</style>

import './section.less';

PostCSS

• Install: Any PostCSS plugins you use (e.g. autoprefixer); config in app root

• Config: postcss.config.js or postcss.config.cjs next to package.json

• Usage: All CSS is run through PostCSS when config exists

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
  },
};

CSS Modules

• Install: none

• Files: *.module.css (naming convention)

• Usage: Import default; use returned object for class names (scoped by Vite)

/* styles.module.css */
.card { padding: 1rem; }
.badge { font-weight: bold; }

<script setup lang="ts">
import styles from './styles.module.css';
</script>
<template>
  <div :class="styles.card"><span :class="styles.badge">New</span></div>
</template>

Tailwind CSS

Tailwind v3 (works with crane build): Use PostCSS. Add postcss.config.js in app root and Tailwind directives in your CSS.

• Install: npm install -D tailwindcss postcss autoprefixer then npx tailwindcss init -p

• Config: postcss.config.js with tailwindcss and autoprefixer

• Usage: In CSS: @tailwind base; @tailwind components; @tailwind utilities; — import that CSS from section client or Vue entry

Tailwind v4 (Vite plugin): Requires the @tailwindcss/vite plugin in Vite config. crane build does not load vite.config.js, so for Tailwind processing during crane build use the v3 + PostCSS approach above.

Bootstrap

• Install: npm install bootstrap; for SCSS also npm install -D sass

• Usage: Import built CSS or Bootstrap SCSS

import 'bootstrap/dist/css/bootstrap.min.css';

@import 'bootstrap/scss/bootstrap';

Lightning CSS

• Install: Use as a PostCSS plugin; add to postcss.config.js

• Usage: Vite runs PostCSS; Lightning CSS runs as part of that pipeline

Summary table

Approach	Install	Usage / file pattern
Plain CSS	—	.css, <style> in SFCs
Sass/SCSS	sass	.scss/.sass, lang="scss"
Less	less	.less, lang="less"
PostCSS	plugins + postcss.config.js	All CSS (Vite runs PostCSS when config present)
CSS Modules	—	*.module.css + default import
Tailwind v3	tailwindcss, PostCSS	postcss.config.js + @tailwind in CSS
Tailwind v4	@tailwindcss/vite	Vite config only (not applied in crane build)
Bootstrap	bootstrap (+ sass for SCSS)	Import CSS or SCSS
Lightning CSS	PostCSS plugin	Via postcss.config.js

CSS variable conflict prevention

Section CSS is loaded alongside Ecwid’s storefront styles. Custom properties (CSS variables) cascade globally; if you use the same names as Ecwid, load order is not guaranteed and styles can break.

Rule: Prefix all your CSS variables with a unique namespace (e.g. agency or project name).

Do	Don’t
--acme-primary	--primary
--myapp-spacing	--spacing
--acme-section-background	--background

Names Ecwid uses (do not define these yourself):

• --global-* — theme/site tokens (e.g. --global-title-font-family-stack, --global-body-font-size, --global-tile-max-width, --global-background-color, --global-button-color, --global-link-color).

• --ls-* — editor UI (e.g. --ls-color-fg-go-default, --ls-color-bg-neutral-top, --ls-color-border-neutral-strong).

• Unprefixed names — layout and colors, e.g. --vh, --max-width-regular, --max-width-wide, --bg-static-light-color, --fg-static-dark-color, --white-color, --button-color, --link-color, --header-height, --cover-height, --grid-gap, --grid-padding, --grid-max-width.

Prefix your own variables (e.g. --acme-*) and avoid defining any of the names above.

Example — safe:

:root {
  --acme-primary: #ff0000;
  --acme-spacing: 1rem;
  --acme-background: white;
}
.my-section { background: var(--acme-background); }

Example — avoid:

:root {
  --primary: #ff0000;      /* can conflict with Ecwid */
  --spacing: 1rem;
  --background: white;
}

Recommendation: use a short, consistent prefix in every variable (e.g. --acme-* or --projectname-*).