vite 项目中如何使用Sass
更新时间：2024年04月27日 16:58:45 作者：Carlos_sam
Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了vite 项目中如何使用Sass,需要的朋友可以参考下
1.安装
npm add sass
注意：有些博客中会告诉你需要 安装sass-loader和sass，这是webpack项目中的做法。而在Vite环境中，如果你想使用Sass预处理器，实际上并不需要单独安装sass-loader。Vite默认集成了对Sass的支持，你只需要安装Sass本身即可。
2.配置
在许多博客中都会告诉你要在vite.config.js中进行这样的配置：
export default defineConfig({
//...
css: {
// css预处理器
preprocessorOptions: {
scss: {
// 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
// 给导入的路径最后加上 ;
additionalData: '@import "@/assets/style/mixin.scss";'
}
}
}
})这么做的目的是全局引入样式 (就是这部分additionalData: '@import "@/assets/style/mixin.scss";')
它其实等同于在main.js中写入以下的代码:
import { createApp } from 'vue'
import App from './App.vue'
import "@/assets/style/mixin.scss"
createApp(App).mount('#app')3.使用
详细的使用方法请参考：Sass: Sass Basics
参考资料
到此这篇关于vite 项目中如何使用Sass的文章就介绍到这了,更多相关vite 使用Sass内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue2+springsecurity权限系统的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了vue项目中如何实现element-ui组件按需引入，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
这篇文章主要介绍了Vue基于vuex、axios拦截器实现loading效果及axios的安装配置,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
vue的特点之一是组件化开发，那么问题来了，组件中的数据和方法都是独立的，我们如何进行组件之间的交互呢。这个时候就要用到组件传参了2022-07-07
vue大文件分片上传之simple-uploader.js的使用
本文主要介绍了vue大文件分片上传之simple-uploader.js的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了基于vue.js实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要为大家详细介绍了vue echarts实现柱状图动态展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家介绍了Vue新增内置组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要分享vuex中mapState思想及应用，在需求开发过程中，有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性，或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的，具体内容，我们一起来看下面文章内容吧2021-10-10
页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,下面这篇文章主要给大家介绍了关于vue实现自定义"模态弹窗"组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
最新评论