Vue前端篇（六）关于scss的坑

最新推荐文章于 2023-03-07 11:00:32 发布
最新推荐文章于 2023-03-07 11:00:32 发布
阅读量717 收藏 1
点赞数
分类专栏： Vue 前端 文章标签： scss sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41728540/article/details/103158110
版权
Vue 同时被 2 个专栏收录
15 篇文章 12 订阅
订阅专栏
前端
13 篇文章 1 订阅
订阅专栏

上一篇修改了Login页面，由于页面使用scss语法，会出现报错的情况，但是已经安装了scss，使用时会出现如下警告，大致意思的sass版本过高与webpack的版本不是很兼容，这就导致了scss语法不生效的问题

解决办法是：打开package.json文件，找到sass-loader，版本改成^7.3.1，然后关掉IDEA，把项目下的依赖node_modules删掉，然后重新打开，在命令行下输入命令重新下载依赖：yarn install

天真吴邪xie
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
sass的一些坑，一些规范
qq_34724739的博客
01-14 622
sass 一些新手容易踩的坑 一、变量 运用变量的时候，变量的作用域 $ 变量名：变量值 $color-black: #000; body{ $color-black: #333; } .color{ color:$color-black } 编译成color：#000，全局>局部 (body) Sass 提供 !global 可以影响全局变量一般慎用 $color-black: #000...
vue sass-loader,webpack安装卸载操作命令
还在活水泥的未来包工头
11-06 1442
确保你的项目中使用的 webpack 和 case-sensitive-paths-webpack-plugin 依赖项是最新版本。如果没有指定特定版本的Node Sass依赖项，可以尝试更新"sass-loader"和"node-sass"依赖项的版本。更新 Vue CLI 版本：升级 Vue CLI 到最新版本可能有助于解决此问题。检查 node-sass 的可用版本：运行下面的命令，查看 node-sass 的可用版本列表。检查依赖项：确保你的项目中的所有依赖项都是最新版本。
降低sass的版本
ScumStudy的博客
11-22 3553
1、卸载当前项目中的sass-loader npm uninstall sass-loader 2、安装低版本的sass-loader npm install sass-loader@7.0.0 3、安装node-sass npm install node-sass
坑爹的scss：怎样在vue项目安装使用scss（node-sass和sass-loader遇到的所有坑）
南北极之间
03-11 4613
1，安装： npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！ 2，配置： webpack.base.conf.js找不到？可以在build文件夹里面找到 在webpack.ba...
vue 之使用 scss 的全局变量
04-07
vue 之使用 scss 的全局变量
uniapp vue2 scss 前端模块-简洁注册页模版
07-25
预览：https://img-blog.csdnimg.cn/c26a64c14d3543afa3ded3e81b7475b6.png 说明：前端模块-简洁注册页模版 框架：uniapp 技术站：vue2、scss
vue3+pinia+scss 不加ts的vue3系统模板.zip
最新发布
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
简单易懂的vue+element+scss金融项目，
10-04
总的来说，这个项目展示了现代前端开发的最佳实践，利用Vue.js进行组件化开发，Element UI 提供丰富的UI组件，而SCSS则优化了CSS的编写过程。这样的组合不仅提高了开发效率，还保证了项目的可维护性和用户体验。对于...
vue安装和使用scss及sass与scss的区别详解
10-17
Vue.js 是一款流行的前端框架，它允许开发者使用各种技术栈来构建用户界面。在实际开发中，CSS 预处理器如 SCSS（Sassy CSS）和 SASS（Syntactically Awesome Style Sheets）能帮助我们编写更易于维护和扩展的样式...
详解如何在vue中使用sass
08-30
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
sass-loader 和 node-sass 替换成sass解决冲突问题
jiudenggushijingguo的博客
03-07 1188
sass-loader node-sass版本问题
Vue2.0项目中使用sass(踩坑之路)
达拉崩巴斑得贝迪卜多比鲁翁_
09-14 957
今天用2.0创建项目的时候，使用scss一直不成功，一直报错……………… 记录一下，防止下次踩坑 1、安装依赖包 vue的webpack项目中需要安装上node-sass、sass-loader和style-loader，所以，在项目中，运行一遍： npm i node-sass sass-loader style-loader -D 运行以上的命令之后，将在package.json文件中的“devDependencies”属性中看到对应的版本号。 2、配置loader 在项目中的build目录找到web
关于后台管理系统项目从Vue2.0迁移到Vue3.0的注意事项和Bug处理及迁移后的感受
izl040905的博客
02-17 1703
对其中牵扯到的内容很多，如组件 Element-ui 版本升级为 Element-plus 后改写组件及内容、对于之前模块化和组件化的重新封装，还有依赖安装，版本的升级迁移、还有一系列的 Bug 问题解决思路等等进行了一次记录。还有就是关于页面中依赖的如 element-plus 之类组件的改变，比如之前的 el-submenu 组件要改写成 el-sub-menu 才能保证效果显示，关于 slot = "name" 要变成 #name 之类的需要变化，还有之前 ref 验证之类的不断更改。
vscode 小程序开发使用 scss 出现红色警告的解决办法
西蒙老爷的博客
04-21 4544
<style style="scss"> 改成 <style lang="scss">
vue如何关闭eslint语法检查
格の调
08-26 5653
创建vue项目的时候，一路回车敲下来，忘记了把Use ESLint to lint your code?(Y/N) 选择了Y， 等到写代码的时候，发现多敲或少敲个空格，都一堆波浪线。 这种对我这样的强迫症实在无法忍受，大家安装的时候还是最好直接选择N. 关闭方法：共2个文件 1、在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则 2、config/index.js中 useEslint: true 改为 useEslint
postcss替换sass-loader
weixin_34029680的博客
07-17 693
2019独角兽企业重金招聘Python工程师标准>>> ...
vue2.0项目中使用sass(含sass基础用法示例)
热门推荐
李大人的博客
02-21 5万+
Sass是一种CSS扩展语言，目前广泛地应用到web项目开发中，使用sass可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的CSS样式，可以说是样式中的“高级语言”。Sass在日常的开发中，是需要通过转换工具转成CSS再引入到HTML文件中，然而，在vue的webpack项目模板中，引入解释sass文件的loader，即可使用sass。本文将展示v...
vue使用scss方法(报错解决方案),及变换主题色
weixin_44279016的博客
03-31 4057
借鉴链接1(主要看这个) 渐渐链接2 一、首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { test: /\.scss$/, loaders: ['style', 'css', 'sass'v] } 3.vue中使用 <style lang='scss' scoped> </style&
前端vue scss定义颜色
04-26
可以使用以下代码在vue中定义颜色： <h1 :style="{ color: textColor }">Hello World export default { data() { return { textColor: "red" }; } }; <style lang="scss"> .container { ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值