在style中使用sass后报错及解决

最新推荐文章于 2025-04-12 13:27:39 发布
原创 最新推荐文章于 2025-04-12 13:27:39 发布
· 911 阅读 · 1 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#sass #css #前端

 

百度说是sass-loader版本过高，然后指定版本下载：

npm install sass-loader@7.3.1 --save-dev

然后再下node-sass后对应配置文件中版本如下：

但是启动后还是报错，如下图：

项目由于安装的node版本不同，安装依赖后导致项目运行失败并有报错问题。

首先需要根据自己电脑安装的node版本对照出当前项目需要下载对应版本的node-sass依赖，对照表如下图：

然后卸予node-saas(npm uninstall node-sass),然后再指定低版本安装npm i -D node-sass@4.14.1

 OK,终于可以在vue项目中愉快的用saas啦

在Vue中使用sass和less，并解决报错问题（this.getOptions is not a function）
耶温的博客
04-25 864
使用 Less 下载依赖：npm install less less-loader 在mian.js 中添加: import less from "less"; Vue.use(less); 使用： <style lang="less"></style> 使用 Less 时运行报错 this.getOptions is not a function 原因：less-loader安装的的版本过高 解决：重新安装较低版本 npm uninstall less-load
vue安装sass-loader运行报错解决方法
格の调
03-02 7400
vue安装sass-loader坑很多，网上的解决方法千篇一律的复制，不知道有没有经过验证。 一、深坑的出现 如果初次安装sass-loader依赖后就报错，那很大概率应该是由于版本问题导致。 你应该是采用如下几个命令安装： npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev
安装sass依赖，项目中style引用sass报错（转载）
weixin_57988035的博客
12-20 404
问题：安装sass依赖，项目中style引用sass报错 解决：sass-loader的版本过高导致的编译错误，所需要降低版本 npm uninstall sass-loader（卸载当前版本）　　　　 npm install sass-loader@7.0.3 --save-dev 如果还出现问题提示node-sass未安装或未存在，可以在安装一遍node-sass就OK了 ...
nodejs/node-sass/sass-loader三者版本对应关系
最新发布
前端阿皓
04-12 1273
nodejs与sass对应关系表
如何使用sass
qq_45670042的博客
08-08 573
文章目录前言使用编译器中sass插件的版本问题本地下载编译使用 前言 最近在学习sass的使用，然后就跟着官网一步一步去下载安装去了，后来想了想不对劲啊，之前用vscode也没有安装过sass也能使用啊？去网上搜了一下，这才发现，官网上说的使用和我想用的方法根本不是一个东西…在此记录一下各种坑吧。 使用 结合官网教程和个人学习来说，我觉得使用sass大体分以下几种使用途径： 本地下载对比编译后文件进行学习 通过编译器的一些插件直接在项目中使用，通过打包工具最后编译 在项目中，我们通常是结合sass-
sass的使用
weixin_44719499的博客
10-21 1300
SCSS提供了从简单到高级的各种功能，使得CSS开发变得更加模块化、灵活和高效。通过合理运用SCSS的变量、mixin、继承、映射等特性，可以显著提升项目的可维护性。模块化管理、文件层次结构、BEM命名规范的结合，能帮助你构建结构清晰、易于扩展的大型前端项目。
idea中vue文件内嵌sass/scss片段提示语法错误
zhujianlin1990的专栏
11-09 6873
idea中vue文件内嵌sass/scss片段提示语法错误 图：问题描述解决办法是在style标签追加属性 rel=”stylesheet/sass” 或者rel=”stylesheet/scss” 图：批量修改 图：效果方法二如果总有个别文件提示语法错误，可以采用选中文件>右键>Mark as Plain Text 将源码文件识别为普通text文件，来暂时消除工程语法错误提示 举个栗子
vue项目 在style标签中引入css,less,sass的方法
weixin_42700654的博客
03-02 7983
vue项目 style标签引入 less sass 在我们编写vue代码时,有时候需要写入大量的css样式,会有一些不方便的情况 1.有时候定义变量可能会和class名称重复,根据字符查找变量时会查出多个,不便于查找 2.css会占用大量的行数 页面的dom和js代码并不是很多 整个页面却有几千行甚至上万 我们可以将css代码单独放在静态目录下存放,在style标签中引入 根据项目所用语言定义文件后缀, .css .less .scss 这里定义的是less后缀 在需要的目录下 style标签下进行引入 可
解决vue中使用less/sass及使用中遇到无效的问题
01-18
在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。 先使用npm下载依赖，命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象： { test: /\.less$/, ...
vue项目安装sass后，在项目中使用报错
一只大海
06-22 2921
1.安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 如果运行之后项目报错 Module build failed: TypeError: this.getResolve is not a function at Object.loader (C:\Users\DELL\Desktop\fantastic-macarons\node_modu
在react项目中使用了sass后导入antd.css报错
m0_54850952的博客
03-02 528
在react项目中使用了sass后导入antd.css报错 最近在项目导入了antd，在引用他样式的时候，项目报错，如果用import 导入antd.css，页面能正常出现，但终端这里一直报错，大概就是这个 Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map: ‘webpack://antd/./components/time-picker/style/index.les
Failed to resolve loader: sass-loader以及后续出错问题解决
chenfangqi7的博客
09-01 8238
Failed to resolve loader: sass-loader。Failed at the node-sass@9postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
vue 的 :style 报错
iTTleStarl的博客
03-14 2682
用vue写 style时， :style="{background-color:o.value}"这个报错了，正确写法是 :style="{'background-color':o.value}" 下面附上：style的用法 一 ,最通用的写法 &lt;p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,...
Sass实战运用，如何利用好Sass
ufrontend的博客
06-13 1191
Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它提供了许多强大的功能，如变量、嵌套规则、混合（Mixins）、函数等，使得CSS的编写更加高效、灵活和易于维护。武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。，这是Sass的一种约定，表示该文件是一个部分文件，不应直接编译为CSS文件。
解决VUE UI可视化界面使用 less,sass的 style 语法报错问题
Huang58_com的博客
02-20 608
范德萨发
CSS进阶---SASS用法
m0_52173534的博客
11-08 1738
「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。 一、了解SASS sass是css的另一种写法，是对css添加了规则，封装了方法，让css代码变得更有复用性，结构更加清晰，也更便于维护 二、安装SASS 2.1首先前提是安装了npm，可以直接在项目中终端输入npm i sass安装sass就可以了 $ npm i sass 2.2 或者使用window+R，打开cmd，在里面输入也是可以 三、 如何使用SASS SASS的使用过程 3.1 创建 首先创建一个.sa.
Vue组件之style - lang - scoped 和 vue模板 sass安装
weixin_47409897的博客
08-28 5862
目录Vue组件之style - lang - scopedvue模板 Vue组件之style - lang - scoped lang 这是标明你书写css的样式类型 有着 scss css less 默认是css <style lang="scss"></style> scoped 作用：就是设置当前组件的样式，只能在当前组件起作用 注意点：就是别的组件修改当前组件的时候，是默认不课被修改的！ 原因： 这是因为webpack打包的时候，会把js,css等文件一起打
less&saas的style写法
jieweiwujie的博客
09-05 205
.div{ margin:10px 20px; padding:20px &-first{ border:1px solid &-contend{ color:red } } } <div class='div'>1 <div class='first'>2 ...
Sass-四种编译输出代码风格
BraveWangDev
01-22 1036
Sass编译生成的.css文件可以通过配置命令或koala得到不同的代码输出风格1,Sass-style-4种编译模式-命令方式sass --watch style.scss:style.css --style compact sass --watch style.scss:style.css --sourcemap sass --watch style.scss:style.css --style
vue项目安装sass后,在项目中使用报错
01-24
当这些配置都正确完成后，应该能够在项目中正常使用sass文件，并且不再出现报错。如果报错仍未解决，可以尝试重新安装依赖、清除缓存或查看项目的日志，以便进一步分析和解决问题。希望以上方法能够帮助解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值