Vue3中引入scss文件的方法步骤
更新时间：2023年08月05日 10:28:50 作者：兴系人生哦
这篇文章主要给大家介绍了关于Vue3中引入scss文件的方法步骤,在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择,需要的朋友可以参考下
1、 npm下载scss包
npm install sass sass-loader -d
2、创建全局的scss文件添加全局样式
3、Vite 添加css配置
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/style/mixin.scss";` // 此处全局的scss文件
}
}
}
})4、使用配置好的 scss 可以使用定义好的scss样式
附：vue项目安装scss常见报错处理方式
在Vue项目安装SCSS的时候，常见报错有以下几种情况：
- sass/scss变量不识别
- 出现“node-gyp rebuild”错误
- 安装node-sass失败
下面我们分别讲解这三种常见的错误及其解决方式：
1. sass/scss变量不识别
如果我们在Vue项目中安装SCSS时，发现无法引用变量，可能是以下几种情况：
1）没有正确定义变量：
正确的变量的写法如下：
//定义变量
$primary-color: #f00;
//使用变量
.foo {
color: $primary-color;
}2）没有用@import导入对应的SCSS文件：
需要在需要使用的SCSS文件的开头导入已经定义的变量的SCSS文件。
示例：
定义文件：var.scss
$primary-color: #f00;
使用变量的文件：style.scss
@import 'path/to/var.scss'; // 导入定义变量的 SCSS 文件
.foo {
color: $primary-color;
}2. 出现“node-gyp rebuild”错误
此报错主要处理node-sass时发生，解决方法如下：
1）检查node-gyp是否正常安装。
可以在终端或命令行输入以下命令检查：
node_modules/.bin/.my-bin-node-gyp -v
2）使用cnpm安装。
安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm安装node-sass：
cnpm install node-sass
3. 安装node-sass失败
当我们执行npm install node-sass时，可能会出现各种安装失败的提示。此时，我们可以考虑使用cnpm代替npm进行安装，或者使用以下命令：
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
总结
到此这篇关于Vue3中引入scss文件的方法步骤的文章就介绍到这了,更多相关Vue3引入scss内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,这篇文章主要介绍了nvue页面用法uniapp,需要的朋友可以参考下2023-12-12
vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解
这篇文章主要介绍了vue3 el-table结合seamless-scroll实现表格数据滚动,创建两个table，隐藏第一个table的body部分，这样就能得到一个固定的head，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了vue日期组件,支持vue1.0和2.0，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
vue作用域插槽详解、slot、v-slot、slot-scope
这篇文章主要介绍了vue作用域插槽详解、slot、v-slot、slot-scope，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下2022-06-06
公众中经常会有这种场景,一些合同、协议等的页面需要进行下载,而且需要和页面保持一致,下面这篇文章主要给大家介绍了关于Vue页面生成PDF的最佳方法,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了从vue源码看Vue.set()和this.$set()的相关知识,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。感兴趣的朋友跟随小编一起看看吧2018-08-08
element-ui tooltip修改背景颜色和箭头颜色的实现
这篇文章主要介绍了element-ui tooltip修改背景颜色和箭头颜色的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
Vue用Export2Excel导出excel,多级表头数据方式
这篇文章主要介绍了Vue用Export2Excel导出excel,多级表头数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
在现代Web开发中,浏览器兼容性是一个重要的问题,尽管大多数用户已经转向了现代浏览器,但仍有一部分用户可能仍在使用老旧的浏览器版本,本文将详细介绍如何在Vue项目中实现低版本浏览器升级提示,并通过多个代码示例来展示不同的应用场景和技术点,需要的朋友可以参考下2024-10-10
最新评论