使用Vite处理css less及postcss示例详解

目录
  • 1. css
  • 2. less
  • 3. postcss
  • 4. 小结

1. css

当前，我们的 vite的基本使用 项目中是没有 css 代码的，但在真实的项目中，肯定会有 css 代码，那 Vite 能否帮助我们对 css 做支持呢？我们可以测试一下，在 src 目录下新建 css 文件夹，在 css 文件夹中新建 style.css 文件，内容如下：

body {
  background-color: #f66;
}

有了这个 css 文件后，先来思考一下，这个 css 文件现在有被打包吗？很明显，没有。因为它没有在项目的依赖中，所以不会被打包。那么项目的依赖在哪里呢？项目依赖的入口在入口文件 index.html 中：

<script src="./src/main.js" type="module"></script>

那么我们可以在 src/main.js 文件中导入这个 style.css 文件，将其加入项目的依赖文件中：

保存更改后，你会发现终端中会打印一行信息，提示我们页面已经重新加载了。这时再来看浏览器页面：

可以看到，页面背景颜色已经成功变成了我们设置的颜色。可见，css 代码已经生效了，所以，Vite 默认就支持对 css 代码的处理（而不需要再像使用 Webpack 时，还需要使用 css-loader 和 style-loader）。它也是通过在 <head> 元素中插入包含了有关样式代码的 <style> 元素实现的：

2. less

那如果项目中还有 less 代码呢？比如，我们先在 src/main.js 文件中添加几行代码，创建应用了 title 类的 <div> 元素，并添加一些文本，之后添加进 <body> 元素中：

...
const titleEl = document.createElement('div')
titleEl.className = 'title'
titleEl.innerText = "Hello Vite"
document.body.appendChild(titleEl)

然后在 css 文件夹中新建 title.less 文件，内容如下（给 title 类设置一些样式）：

@fontSize: 30px;
@fontColor: yellow;
.title {
  font-size: @fontSize;
  color: @fontColor;
}

接着，在 src/main.js 文件中引入这个 title.less 文件：

保存修改后，你会发现终端中报错了：

大意是当前的预处理器需要依赖 less 这个工具，但 Vite 没有找到它。确实，我们还没有安装它，所以我们需要先安装 less 这个工具（前面在讲 Webpack 时说过，在使用 less-loader 去加载 less 文件时，也需要依赖 less 这个工具，所以必须先安装 less。只不过在 Vite 中，我们不再需要使用 less-loader 了，但 less 工具还得用）：

npm install less -D

安装完 less，再执行 npx vite 命令启动项目：

这时就没有问题了，再来看浏览器中的效果：

可以看到，Hello Vite 的字体大小和颜色都已经成功渲染出来了，Vite 已经将 less 代码编译成了 css 代码。

3. postcss

前面讲 Webpack 时我们还讲了 postcss，我们知道 postcss 可以对某些 css 属性（比如 user-select）自动添加浏览器前缀。那么 Vite 会自动帮我们添加浏览器前缀吗？我们来测试一下，在 src/css/title.less 文件中添加 user-select: none; 这行代码：

@fontSize: 30px;
@fontColor: yellow;
.title {
  font-size: @fontSize;
  color: @fontColor;
  user-select: none; // 添加 user-select 属性，测试浏览器前缀是否有添加
}

然后我们看下浏览器中的效果：

可见，Vite 默认情况下是不会帮我们给 css 属性添加浏览器前缀的。那如果我们想让它帮我们自动添加该怎么做呢？那么，我们可以先来安装一下 postcss 工具：

npm install postcss -D

安装完 postcss 后，再来执行 npx vite 把项目跑起来，再来看效果：

还是没有效果，这是为什么？因为我们说过，postcss 是需要依赖对应的插件来帮助我们实现对应的功能的，所以，我们这里可以安装一下 postcss-preset-env 插件（或者 autoprefixer 插件，但现在 postcss-preset-env 用得更多）：

npm install postcss-preset-env -D

安装好之后，还需要配置 postcss，我们可以在项目目录下新建 postcss.config.js 文件，内容如下：

module.exports = {
  plugins: [
    require('postcss-preset-env')
  ]
}

注意：在使用 Webpack 时 postcss 配置插件这边可以直接传入字符串，但 Vite 这边不行，如果不通过 require() 导入插件，而是直接传字符串：

module.exports = {
  plugins: [
   'postcss-preset-env'
  ]
}

启动项目会报错：

然后再来执行 npx vite 命令启动项目，浏览器中查看效果：

可以看到，这次就有加上浏览器前缀了。

4. 小结

你会发现，对于 css 相关的处理（不管是 css 还是 less 还是 postcss），我们没有编写任何关于 Vite 的配置，因为 Vite 已经帮我们将这些配置都内置了。而且你会发现，Vite 的执行效率是比 Webpack 高很多的。

Vite 可以直接支持对 css 的处理；

直接导入 css 即可；

Vite 可以直接支持 css 预处理器，比如 less；

直接导入 less；

之后安装 less 编译器：

npm install less -D

Vite 直接支持 postcss 的转换；

只需要安装 postcss，并且配置 postcss.config.js 配置文件即可：

npm install postcss postcss-preset-env -D

module.exports = {
  plugins: [
    require('postcss-preset-env')
  ]
}

以上就是使用Vite处理css less及postcss示例详解的详细内容，更多关于Vite处理css less postcss的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vite的搭建与使用的详细步骤

    vite的搭建与使用的详细步骤

    目录 1.安装: 2.在vite项目中使用TypeScript 3.vite项目使用less sass scss 4.vite打包 5.下面就来创建一个标准的项目 实际开发中编写的代码往往是不能被浏览器直接识别的,比如ES6,TypeScript,Vue文件等.所以此时我们必须通过构建工具来对代码进行转换,编译,类似的工具有webpack,rollup,parcel.但是随着项目越来越大,需要处理的javascript呈指数级增长,模块越来越多.构建工具需要很长时间才能开启服务器,HMR也需要几

  • 如何用Vite构建工具快速创建Vue项目

    如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • vue3+vite使用jsx和tsx详情

    目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def

  • Vite使用Esbuild提升性能详解

    Vite使用Esbuild提升性能详解

    目录 前言 初探 Esbuild 关键 API - transfrom & build plugin Esbuild 在 Vite 中的巧妙使用 预构建 middlewares 中内容转换 结束语 前言 在上一篇 为什么有人说 vite 快,有人却说 vite 慢? 中,我们提到过开发模式下使用 Vite 会有首屏性能下降的负面效果.之所以会造成首屏性能下降,一方面是 dev server 需要完成预构建才可以响应首屏请求:另一方面是需要对请求文件做实时转换. 也许有的同学会问,是不是针对这两个

  • Vite vue3多页面入口打包以及部署踩坑实战

    Vite vue3多页面入口打包以及部署踩坑实战

    目录 为什么需要多入口? 一.改造项目 二.vite.config.ts配置 三.部署 总结 为什么需要多入口? 公司原生的移动端上需要用webview引入一些性能要求不高的H5页面,初步考虑后选择用vue试个水,前期页面跳转选择使用vue-router,测试过程中在安卓高版本下右滑返回效果尚可,ios端初步尝试使用的最左侧touch事件移动距离检测以及router判断index添加过场动画,但是整体的效果依然达不到下图的效果. 原先项目中是使用多个html页面以及原生自带的协议去打开html,

  • vue使用vite配置跨域以及环境配置详解

    vue使用vite配置跨域以及环境配置详解

    目录 如何配置跨域,代理域名 区分开发环境和生产环境,以及预发布环境 可以做什么事 补充:解决跨域常用方法 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 如何配置跨域,代理域名 不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'

  • 使用Vite处理css less及postcss示例详解

    使用Vite处理css less及postcss示例详解

    目录 1. css 2. less 3. postcss 4. 小结 1. css 当前,我们的 vite的基本使用 项目中是没有 css 代码的,但在真实的项目中,肯定会有 css 代码,那 Vite 能否帮助我们对 css 做支持呢?我们可以测试一下,在 src 目录下新建 css 文件夹,在 css 文件夹中新建 style.css 文件,内容如下: body { background-color: #f66; } 有了这个 css 文件后,先来思考一下,这个 css 文件现在有被打包吗?

  • AngularJS的Filter的示例详解

    AngularJS的Filter的示例详解

    贴上几个有关Filter使用的几个示例. 1. 首先创建一个表格 <body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> <br><br

  • PHP与Web页面的交互示例详解二

    前言 在<PHP学习笔记-PHP与Web页面的交互1>笔记中讲解了form表单的一些属性,包括它的输入域标记.选择域标记和文字域标记的写法,接下来的内容就是讲如何获取表单数据以及PHP数据的传递,包括对各种控件值的获取. 插入表单 提交表单之前一定得有表单,当我们的表单创建完毕后可以将表单插入Web页中,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w

  • SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    SSM框架整合JSP中集成easyui前端ui项目开发示例详解

    目录 前言 EasyUI下载与配置 页面美化 运行结果 总结与问题 前言 前端的UI框架很多,如bootsrap.layui.easyui等,这些框架提供了大量控件供开发人员使用,我们无需花费太大的精力,使得我们的页面具有专业标准,使用起来也很简单.所有的前端框架使用方式基本上大同小异,以下使用easyui作为UI框架做一演示,个人认为easyui提供的控件比较好看. EasyUI下载与配置 使用EasyUI,必须下载其js包,下载官网地址:https://www.jeasyui.cn/ 下载j

  • javascrip高级前端开发常用的几个API示例详解

    目录 MutationObserver API 特点 IntersectionObserver API 举个例子 图片懒加载 无限滚动 getComputedStyle() API 与style的异同 getBoundingClientRect API 应用场景 1.获取 dom 元素相对于网页左上角定位的距离 2.判断元素是否在可视区域内 MutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口. 当 DOM 对象树发生任何变动时,Mutati

  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    目录 前言 主要实现代码 HTML代码 JS代码 前言 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行http://haiyong.site/xiaxue 首先看看项目结构,一张雪花图片,一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了,或者可以直接用我上传到自己网站上的图片地址:http://haiyong.site/wp-content/uploads/2021/

  • Python制作可视化报表的示例详解

    Python制作可视化报表的示例详解

    大家好,我是小F- 在数据展示中使用图表来分享自己的见解,是个非常常见的方法. 这也是Tableau.Power BI这类商业智能仪表盘持续流行的原因之一,这些工具为数据提供了精美的图形解释. 当然了,这些工具也有着不少缺点,比如不够灵活,无法让你自己创建设计. 当你对图表展示要求定制化时,编程也许就比较适合你,比如Echarts.D3.js. 今天小F给大家介绍一个用Python制作可视化报表的案例,主要是使用到Dash+Tailwindcss. 可视化报表效果如下,水果销售情况一览~ Das

  • Ajax实现上传图像功能的示例详解

    Ajax实现上传图像功能的示例详解

    最终效果展示 xhr发起请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt

  • vue实例成员 插值表达式 过滤器基础教程示例详解

    vue实例成员 插值表达式 过滤器基础教程示例详解

    目录 一. 什么是Vue 二.为什么学Vue 三.如何使用Vue 下载安装? 插值表达式 四.vue特点 1.虚拟DOM 2.数据的双向绑定 3.单页面应用 4.数据驱动 五.Vue实例 六.实例成员 - 挂载点 | el - 自定义插值表达式括号| delimiters - 数据 | data - 过滤器 | filters - 方法 | methods - js对象(即字典)补充 - 插值表达式转义 | delimters - 计算属性 | computed - 监听属性 | watch 一

  • Python Flask实现图片上传与下载的示例详解

    Python Flask实现图片上传与下载的示例详解

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html 介绍 5.1 upload Jinja 模板介绍 5.2 upload css 介绍(虚线框) 5.3 upload js 介绍(拖拽) 1.效果预览 我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下: 2.新增逻辑概览 我们在官方指导工程上进行增加代码,改动如下: 由于 fl

随机推荐