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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现选项卡案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家介绍了关于vue项目使用js监听浏览器关闭、刷新及后退事件的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue mixins组件复用的几种方式（小结）,vue中提供了一种混合机制mixins，用来更高效的实现组件内容的复用,有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了vue实现的微信机器人聊天功能,结合实例形式分析了基于vue.js的微信机器人聊天相关界面布局、ajax交互等操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2019-02-02
这篇文章主要给大家介绍了关于vite基本常见配置讲解的相关资料,最近做项目要求将webpack打包方式换成vite,下面将详细讲解一下配置vite需要改动的东西,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了vue+elementUI实现简单日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
element-UI el-table修改input值视图不更新问题
这篇文章主要介绍了element-UI el-table修改input值视图不更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了vue点击Dashboard不同内容 跳转到同一表格的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue element插件this.$confirm用法及说明(取消也可以发请求)
这篇文章主要介绍了vue element插件this.$confirm用法及说明(取消也可以发请求)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue动态组件component标签的用法,在Vue中，可以通过component标签的is属性动态指定标签，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
最新评论