使用Vite处理css less及postcss示例详解
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的资料请关注脚本之家其它相关文章！
相关文章
Vuex是专门为Vuejs应用程序设计的状态管理工具,这篇文章主要给大家介绍了关于Vuex状态机快速了解与实例应用的相关资料,需要的朋友可以参考下2023-01-01
我们在做网站开发时，登录页面很多情况下是可以用手机号接收短信验证码，本文主要介绍了vue_drf实现短信验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名和vue init webpack 项目名两种，这篇文章主要介绍了vue/cli 配置动态代理，无需重启服务,需要的朋友可以参考下2022-05-05
本篇文章主要介绍了详解vue组件化开发-vuex状态管理库，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
这篇文章主要给大家介绍了关于Vue3 Transition组件给页面切换并加上动画效果的相关资料,vue的过渡动画主要是transition标签的使用,配合css动画实现的,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue filter 完美时间日期格式的方法，文中给大家提到了vue filter方法-时间格式化 的代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
本文主要介绍了vue实现echart饼图legend显示百分比的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最近开始入坑前端mapbox地图,跟大家一起慢慢深入学习,下面这篇文章主要给大家介绍了关于vue项目中使用mapbox地图切换底图的详细教程,文中给出了详细的实例代码,需要的朋友可以参考下2023-04-04
文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是由于历史模式问题导致的,解决方法是修改Nginx配置,将所有页面请求重定向到index.html,并在Vue应用中覆盖所有路由情况2025-02-02
这篇文章主要介绍了vue项目 git提交及服务器部署方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
最新评论