vue2项目集成scss所踩的坑

于 2024-08-06 17:01:56 发布
阅读量210 收藏
点赞数 1
文章标签： scss 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44077118/article/details/140960484
版权

1、node版本与node-sass、sass-loader版本的对应关系，本人使用的node:12.1.0版本，node-sass:4.12.0,sass-loader:7.1.0 

坑：安装node-sass老报python错误，使用 npm i node-sass@24.12.0 --ignore-scripts
安装成功，但是使用npm run dev 命令编译node-sass报错，最终使用npm rebuild node-sass重新编译成功，vue文件中引入scss成功编译

解决方案参考：从根本上解决npm install时，node-sass 报错缺少python2_构建node-sass时缺少python环境导致的-CSDN博客

王新勃
关注
vue项目经验：集成sass/scss
weixin_45031595的博客
08-17 1万+
vue-cli3提供了两种方式集成sass/scss 创建项目时选择预处理器sass 手动安装sass-loader 安装sass 方法一：创建vue项目时选择预处理器sass 使用vue-cli3创建vue项目 Vue CLI v4.5.15 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features
详解Vue2 添加对scss的支持
12-07
引入loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev scss支持 为了使用scss，我们需要先安装相关的node包： npm install --save style-loader sass-loader node-sass file-loader 安装好之后，为了可以在.vue和.scss中使用，需要在webpack.config.js中配置对应的解析器： var webpack = require(
vue 集成scss
web修理工
08-04 330
npm i -D sass-loader node-sass <style lang="scss" scoped> .img { width: 100%; } </style> 集成vant npm i vant-weapp -S --production
vue2.0+版本项目中scss安装和应用以及踩过的坑
m0_38105640的博客
10-12 2890
一：安装 正常的安装指令 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 但是，执行上述指令，安装是会报一些列版本错误，下面有列举，建议直接安装指定版本，绕过一些坑。 npm install node-sass@4.14.1--sav...
vue2安装 node-sass sass-loader 版本
ferwagrea的博客
02-24 1970
4.运行你vue项目，如果出现报错，先删除node_modules，再npm install一次.3.去网上找node版本对应的node-sass sass-loader 版本。1.先删除已经下载的 node-sass sass-loader。我的版本是node16.14.0。2.查看node.js环境。如果出现版本不兼容的报错。
Vue中node-sass和sass-loader版本问题
qq_45408876的博客
11-19 6244
如果直接安装node-sass和sass-loader的话，执行组件css的时候会打包失败，卡在打包至写了css的组件上，我整了一天，还好是弄好了。 npm install sass-loader node-sass --save-dev 这是直接安装SASS加载器。。 安装好后只要不运行写了css的组件，就能运行项目，写了css的项目就会打包失败。从而的到一个空页面。什么都不显示，也不报错的项目。 CDM中就会出现打包至一半，卡起的问题 将该页面从路由中注释后，则能运行项目。 后面发现就是SASS加载
Vue + Scss 动态切换主题颜色实现换肤的示例代码
10-15
在Vue项目中集成Scss，需要先安装node-sass和sass-loader这两个npm包，这样项目就可以处理Scss文件了。 - **在webpack配置中添加Scss规则**：在webpack的配置文件中，需要添加对应的规则来处理Scss文件，包括如何...
Vue2工程中使用SCSS定义工具样式
SongD1114的博客
04-14 3857
Vue2工程中使用SCSS定义工具样式 # SASS（SCSS）用于生成css工具类，和less差不多 npm i -D sass sass-loader px to rem插件：写下物体的px大小后点击option+Z可以转换为rem。 option+S：设置默认字体大小数值。 ...
vue3 vite集成scss
07-27
要在Vue 3和Vite项目中集成SCSS，你可以按照以下步骤进行操作： 1. 首先，确保你已经创建了一个Vue 3项目，可以使用Vue CLI来创建一个新的项目：`vue create my-project`。选择Vue 3 preset，并根据需要进行其他...
Django2.x与Vue2.x融合开发的Django-Vue-Extend项目源码
最新发布
03-26
本项目是一个融合了Django2.x和Vue2.x双技术栈的集成开发项目。它采用JavaScript作为主要开发语言，同时融合了Python、Vue、CSS、HTML等编程语言和Shell脚本，为开发者提供了一个强大的前后端分离的开发框架。 源码...
21.（vue3.x+vite）使用scss.rar
11-15
通过以上步骤，你已经成功地在 Vue3.x + Vite 项目中集成了 SCSS。这使得代码风格更加统一，易于维护，同时可以充分利用 SCSS 提供的强大功能。记得在开发过程中，持续更新和优化你的 SCSS 规范和资源，以保持项目的...
vue开发过程中node和sass互相对应的版本
weixin_44870969的博客
04-19 5784
1.点击查看稳定版链接 2.点击查看拓展版链接
使用scss报错的解决方案-vue篇
阿莹yes的博客
05-18 972
总结一下大概就是要安装跟node版本匹配的node-sass和，如果使用的都是最新版本，直接执行以下指令即可或这里的–save-dev和–save的区别只是下载到里的或，两者区别在于前者是在本地环境用到的依赖，后者是在开发环境需要用到的依赖，只在本地开发的话–save-dev即可。踩坑，留下足迹~原文链接：https://blog.csdn.net/August_802/article/details/124985920。
vue2项目引入scss
辰苏.的博客
08-18 1609
3、可以使用了，在style中加入lang=”scss“就可以了。1、安装sass-loader。2、安装node-sass。
关于vue项目的node、node-sass、sass-loader的版本问题
lu123ying的博客
07-29 2187
关于node、node-sass、sass-loader版本问题
vue项目中使用scss出错解决方法
Debug的博客
10-24 5351
vue 使用scss报错 this.getOptions is not a function 通过npm安装sass npm install node-sass npm intall sass-loader 上面命令安装的是最新版的，出现错误的原因就是安装最新版的导致getOptions()不兼容 解决方案就是卸载sass-loader，安装低版本，命令如下 npm uninstall sass-loader //卸载 npm install sass-loader@8.0.0 //安装8.0 .
解决Vue中安装sass-loader和node-sass版本匹配的报错
lyk_xz的博客
04-17 4131
最近一周没有更新博客是由于手头有点布置的项目,每天比较忙过的也很充足,基本时间安排的满满的,今天休息天就去外面跑了跑歩把一周的压印都释放了出去,瞬间感觉心情开朗了很多,晚上回来头脑感觉比较清晰就把以前遇到过的一个Bug以及解决思路通过复盘给大家分享一下,好了接下来步入正题 我们在写vue项目的时候有时候大家会用到scss这时候就需要安装依赖sass-loader和node-sass,但是这俩个安装是十分坑爹的,它们俩会由于这个版本匹配冲突的原因导致运行报错,当时我在这个坑中踩了好久,接下来我把报错代码献
vue2项目中全局引入scss变量
weixin_42349568的博客
03-13 2787
一，设置好变量文件 二，设置vue.config.js中的配置 devServer: { ... }, css: { loaderOptions: { sass: { prependData: `@import "@/assets/style/common.scss";` } } }, 三，重启项目即可
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值