【Vite基础】002-Vite 中使用 CSS 的各种功能

红太狼 2023-09-27 11:21 129阅读 0赞

# 【Vite基础】002-Vite 中使用 CSS 的各种功能 #

### 文章目录 ###

*  【Vite基础】002-Vite 中使用 CSS 的各种功能
 *  一、Vite 原生支持 CSS
 *   *  1、概述
     *  2、代码演示
     *   *  第一步：创建 styles 目录和 index.css 文件
         *  第二步：在 main.js 中导入 css 文件
         *  第三步：添加 class
         *  第四步：运行并访问
 *  二、Vite 推荐使用原生的 css variable
 *   *  1、概述
     *  2、代码演示
     *   *  第一步：修改 index.css
         *  第二步：运行与访问
 *  三、使用 postcss 特性
 *   *  1、概述
     *  2、代码演示
     *   *  第一步：创建 postcss.config.js 文件
         *  第二步：修改 index.css
         *  第三步：编译后看控制台
 *  四、配置别名 @import alias
 *   *  1、概述
     *  2、代码演示
     *   *  第一步：修改 vite.config.js
         *  第二步：修改 index.css
         *  第三步：在 main.js 中使用别名引入 css
         *  第四步：运行访问
 *  五、css-modules
 *   *  1、概述
     *  2、代码演示
     *   *  第一步：创建 test.module.css 文件
         *  第二步：修改 App.jsx
         *  第三步：运行和访问
 *  六、css 预处理
 *   *  1、概述
     *  2、代码演示
     *   *  第一步：安装 less
         *  第二步：创建 test.less 文件
         *  第三步：在 App.jsx 中去掉之前的 css 样式
         *  第四步：在 main.js 中改用 test.less
         *  第五步：运行和访问

# 一、Vite 原生支持 CSS #

## 1、概述 ##

可直接使用 css ！

## 2、代码演示 ##

### 第一步：创建 styles 目录和 index.css 文件 ###

![image-20220924113641829][]

### 第二步：在 main.js 中导入 css 文件 ###

import {
         createApp } from 'vue'
    import './style.css'
    // 去掉 .vue 使其指向 App.jsx
    import App from './App'
    // 引入自定义的 css 文件
    import './styles/index.css'
    
    createApp(App).mount('#app')

### 第三步：添加 class ###

import { defineComponent } from "vue";
    
    export default defineComponent({
        setup() {
            return () => <div class="root">Hello JSX !</div>;
        }
    });

### 第四步：运行并访问 ###

![image-20220924114023997][]

# 二、Vite 推荐使用原生的 css variable #

> vue3 支持最新的 css 语法！Vite 集成了 postcss 的功能！
> 
> 推荐阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/Using\_CSS\_custom\_properties

## 1、概述 ##

简单说，就是我们可以在 css 文件中进行**变量的定义**！

## 2、代码演示 ##

### 第一步：修改 index.css ###

/* root 相当于是一个命名空间 */
    :root {
        
        --main-bg-color: aqua;
    }
    
    .root {
        
        color: red;
        /* 使用 */
        background-color: var(--main-bg-color);
    }

### 第二步：运行与访问 ###

![image-20220924115200761][]

# 三、使用 postcss 特性 #

## 1、概述 ##

Vite 已经集成了 postcss 的功能！

## 2、代码演示 ##

### 第一步：创建 postcss.config.js 文件 ###

**代码**

// 导入 @postcss-plugins/console
    // 作用：编译后控制台打印！
    import console from '@postcss-plugins/console'
    
    export default {
        
        plugins: [
            console(),
        ]
    }

**截图**

![image-20220924134517878][]

### 第二步：修改 index.css ###

/* root 相当于是一个命名空间 */
    :root {
        
        --main-bg-color: aqua;
    }
    
    .root {
        
        /* 使用 postcss 插件 @postcss-plugins/console */
        @console.error Hello, world 好难啊！终于成功了！和教程不一样！！！;
        color: red;
        /* 使用 */
        background-color: var(--main-bg-color);
    }

### 第三步：编译后看控制台 ###

![image-20220924134607780][]

# 四、配置别名 @import alias #

## 1、概述 ##

配置别名，缩短路径。

## 2、代码演示 ##

### 第一步：修改 vite.config.js ###

import {
         defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    // 导入 vueJsx
    import vueJsx from '@vitejs/plugin-vue-jsx'
    
    // https://vitejs.dev/config/
    export default defineConfig({
        
      // 调用 vueJsx()
      plugins: [vue(), vueJsx()],
      // 配置别名
      resolve: {
        
        alias: {
        
          '@style': '/src/assets/style',
        },
      },
    })

### 第二步：修改 index.css ###

/* root 相当于是一个命名空间 */
    :root {
        
        --main-bg-color: aqua;
    }
    
    .root {
        
        /* 使用 postcss 插件 @postcss-plugins/console */
        @console.error Hello, world 好难啊！终于成功了！和教程不一样！！!;
        color: red;
        /* 使用 */
        background-color: var(--main-bg-color);
    }
    
    div {
        
        font-size: 30px;
        font-weight: bolder;
    }

### 第三步：在 main.js 中使用别名引入 css ###

import {
         createApp } from 'vue'
    import './style.css'
    // 去掉 .vue 使其指向 App.jsx
    import App from './App'
    // 引入自定义的 css 文件
    // import './styles/index.css'
    // 通过 alias 引入 css 文件
    import '@styles/index.css'
    
    createApp(App).mount('#app')

### 第四步：运行访问 ###

![image-20220924135527755][]

# 五、css-modules #

## 1、概述 ##

> https://github.com/css-modules/css-modules

**CSS 模块**是一个CSS 文件，默认情况下，所有类名和动画名都在本地范围内。所有 URL ( `url(...)`)`@imports`都采用模块请求格式（`./xxx`并且`../xxx`表示相对的，`xxx`表示`xxx/yyy`在模块文件夹中，即在 中`node_modules`）。

\*\*命名：\*\*对于本地类名，建议使用驼峰命名法，但不强制。

## 2、代码演示 ##

### 第一步：创建 test.module.css 文件 ###

.card {
        
        margin: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 5px #ccc;
        background-color:yellowgreen !important;
    }

### 第二步：修改 App.jsx ###

import { defineComponent } from "vue";
    
    import test from '@styles/test.module.css';
    
    export default defineComponent({
        setup() {
            return () => <div class={`root ${test.card}`}>Hello JSX !</div>;
        }
    });

### 第三步：运行和访问 ###

![image-20220924140812436][]

# 六、css 预处理 #

> css pre-processors

## 1、概述 ##

> Vite 天生支持！

包括 sass 、less 等有一定编程能力的 CSS 的预处理工具。

## 2、代码演示 ##

### 第一步：安装 less ###

yarn add less --dev

### 第二步：创建 test.less 文件 ###

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

### 第三步：在 App.jsx 中去掉之前的 css 样式 ###

import { defineComponent } from "vue";
    
    export default defineComponent({
        setup() {
            return () => <div class="root">Hello JSX !</div>;
        }
    });

### 第四步：在 main.js 中改用 test.less ###

import {
         createApp } from 'vue'
    import './style.css'
    // 去掉 .vue 使其指向 App.jsx
    import App from './App'
    // 引入自定义的 css 文件
    // import './styles/index.css'
    // 通过 alias 引入 css 文件
    // import '@styles/index.css'
    // 改用 less
    import '@styles/test.less'
    
    createApp(App).mount('#app')

### 第五步：运行和访问 ###

![image-20220924142224692][]

[image-20220924113641829]: https://img-blog.csdnimg.cn/img_convert/4147a9280c77ba423ce23f00413419ab.png
[image-20220924114023997]: https://img-blog.csdnimg.cn/img_convert/fd632818fc8779b90784c0e31bb125be.png
[image-20220924115200761]: https://img-blog.csdnimg.cn/img_convert/b9dc0ef8ff50959907e1e71573dd6938.png
[image-20220924134517878]: https://img-blog.csdnimg.cn/img_convert/a9c15451c2e9231e1e33eabd0ba63e00.png
[image-20220924134607780]: https://img-blog.csdnimg.cn/img_convert/502afebb97bc950a4fbc57fb3975b4bd.png
[image-20220924135527755]: https://img-blog.csdnimg.cn/img_convert/be05cb6d521068554824f2197f85cf40.png
[image-20220924140812436]: https://img-blog.csdnimg.cn/img_convert/293662a31b6ee57ed3f9ccf4ab19e90c.png
[image-20220924142224692]: https://img-blog.csdnimg.cn/img_convert/91ffc4daedd39c6456a96c77756814cf.png