Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Vite from entry to master | deal with CSS

Prepare the environment

Create the Viet-CSS-vue3 project

$yarn create vite stocking Project Name:... Vite-css-vue3 ✔ ✔ Select a framework from vue ✔ a variantcd vite-css-vue3
$ yarn
$ cd src
Create a style folder
$ mkdir style
# to create the index. The CSS
$ touch index.css
Copy the code

Configure vuE-JSX plug-in

$ yarn add @vitejs/plugin-vue-jsx -D
Copy the code

// vim vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// Introduce JSX dependencies
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),/ / to use vue - JSX]})Copy the code

– Create app.jsx in SRC directory

import { defineComponent } from "@vue/runtime-core";
import "./style/index.css"

export default defineComponent({
    setup() {
        return () = > <div class="root">Hello Vue3 Jsx</div>}})Copy the code

To modify the main js

-- import App from './App.vue'
++ import App from './App'
Copy the code

– Vim index.css

.root {
    color: red;
}
Copy the code

– View the effect in the browser

Native CSS Variable

In short, CSS can support variable definition ~

See the official website: developer.mozilla.org/zh-CN/docs/…

vim index.css

/* :root represents the namespace */
:root{-main-bg-color: blue
}
.root {
    color: var(--main-bg-color);
}
Copy the code

– View the effect in the browser

postcss

# ~ Root directory
$ yarn add @postcss-plugins/console -d Install plugins
$ touch postcss.config.js
Copy the code

// postcss.config.js
module.exports = {
    // CSS Console output plug-in
    plugins: [require("@postcss-plugins/console")]}Copy the code

Write logs in the CSS ~

/* index.css */
/* :root represents the namespace */
:root{-main-bg-color: blue
}
.root {
    @console.error hello root;
    color: var(--main-bg-color);
} 
Copy the code

– View logs on the console

/vite-css-vue3/src/style/index.css
[postcss-console] hello root (7, 5)
Copy the code

@import alias (CSS Import mapping Settings)

// vim vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// Introduce JSX dependencies
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),/ / to use vue - JSX].resolve: {
    alias: {
      "@style": "/src/style".// Add @styles mapping}}})Copy the code

// App.jsx
import { defineComponent } from "@vue/runtime-core";
import "@style/index.css" / / use alias
export default defineComponent({
    setup() {
        return () = > <div class="root">Hello Vue3 Jsx</div>}})Copy the code

css-modules

What is the CSS – modules?

Github.com/css-modules…

/*test.module.css*/
.moduleClass {
    color: yellow
}
Copy the code

// App.jsx
import { defineComponent } from "@vue/runtime-core";
import "@style/index.css"
import classes from '@style/test.module.css'

export default defineComponent({
    setup() {
        return () = > {
            return <div class={`rootThe ${classes.moduleClass} `} >Hello Vue3 Jsx</div>}}})Copy the code

Core: CSS pre-processors [Sass, Less, Stylus]

Vite CSS preprocessing tool

Use less

yarn add less -D
touch /src/style/index.less
Copy the code

// /src/style/index.less

@bgColor: red;
.root {
    background-color: @bgColor;
}
Copy the code

// App.jsx
import { defineComponent } from "@vue/runtime-core";
import "@style/index.css"
import "@style/index.less"
import classes from '@style/test.module.css'


export default defineComponent({
    setup() {
        return () = > {
            return <div class={`rootThe ${classes.moduleClass} `} >Hello Vue3 Jsx</div>}}})Copy the code