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 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案
我自己使用addRoutes动态添加的路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面,这说明没有找到指定路由才跳到404路由的,这样的情况如何处理呢,下面小编给大家分享解决方案,一起看看吧2023-10-10
详解vue中使用express+fetch获取本地json文件
本篇文章主要介绍了详解vue中使用express+fetch获取本地json文件，非常具有实用价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了vue 动态style 拼接宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧2023-02-02
演示代码使用 Vue3 + ts + Vite 编写，但是也会列出适用于 Vue2 的优化技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
关于Element-ui中el-table出现的表格错位问题解决
使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题,下面这篇文章主要给大家介绍了关于Element-ui中el-table出现的表格错位问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹,下面这篇文章主要给大家介绍了关于Vue项目打包部署的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了将vue的项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下2018-03-03
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了vue实现选择商品规格功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论