vue-cli的项目 style lang="scss" 写 scss样式报错

最新推荐文章于 2024-05-23 14:20:52 发布
最新推荐文章于 2024-05-23 14:20:52 发布
阅读量1.5w 收藏 3
点赞数 5
分类专栏： vue项目 文章标签： vue项目遇到的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34841115/article/details/79880588
版权
报错代码：

解决方案:

安装以下依赖就可以了，vue-cli默认没有scss-loader,scss-loader又需要node-sass，只安装scss-loader是不行的。另外webpack就不需要配置了，因为vue-cli会帮你配置安装的loader

"node-sass": "^4.5.1",
    "sass-loader": "^6.0.3",
    "scss": "^0.2.4",
    "scss-loader": "^0.0.1",
npm install （上面几个包） --save 
ok
耿耿耿
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在 vue-cli v3.0 中使用 SCSS/SASS的方法
01-19
在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS，这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)，...
在vue-cli创建的项目中使用sass操作
11-19
安装sass-loader node-sass cnpm install sass-loader node-sass -D ...补充知识：vue-cli的项目 style lang=”scss” 写 scss样式报错 报错代码： 解决方案： 安装以下依赖就可以了，vue-cli默认没有scs
style 使用lang = ‘scss’ 报错
weixin_33887443的博客
12-27 2222
<style lang="scss" rel="stylesheet/scss" scoped> .export-wrapper{ } </style> 这样写就可以了 转载于:https://www.cnblogs.com/longsiyuan/p/10185392.html
vue中使用lang = “scss“报错
include_computer的博客
12-15 921
① npm install sass-loader@7.3.1 --save-dev ② npm install node-sass --save 安装node-sass报错安装不了，使用淘宝镜像安装 cnpm install node-sass --save ③ npm install style-loader --save ④ 在build/webpack.base.config.js中添加： { test: /\.scss$/, loaders: ['style', 'css',
lang=“scss“详解
最新发布
Princetonggg的博客
05-23 420
SCSS是Sass（Syntactically Awesome Stylesheets）的一种语法，它是一种CSS预处理器，提供了许多有用的功能，如变量、嵌套规则、混合宏等，这些功能可以使CSS的编写更加简洁和强大。SCSS是CSS的一个超集，这意味着任何有效的CSS语法都是有效的SCSS语法。当你在<style scoped lang="scss">标签中写CSS时，这些CSS代码将按照常规CSS的方式工作，同时你也可以利用SCSS提供的额外功能，如变量、嵌套规则、混合宏等，来增强和简化你的样式编写。
vue-cli的项目中 style lang=“scss“ 会报错
weixin_39430223的博客
11-24 693
vue-cli的项目中 style lang="scss" 会报错
vue里怎么用scss及报错解决
霜之哀伤
03-24 1188
vue里怎么用scss 使用vue-cli搭建项目有内置的webpack方案，但是没有使用scss。vue提供了初始化的webpack模板，其中使用了vue-loader。vue-loader默认只支持sass,要是想要使用scss，必须安装node-sass和sass-loader，并修改相关webpack配置。具体操作如下： 依次执行以下命令 安装node-sass和sass-loader n...
解决style lang="scss"的问题
热门推荐
hjj1198的博客
10-30 1万+
Vue安装sass的命令： 1、npm install node-sass --save-dev 2、npm install sass-loader --save-dev 在进行第一步的时候，我们会发现用报了下面这个的错，在百度一下问题的时候，发现原因是： 首先要知道的是，安装node-sass时在node scripts/install阶段会从 github.com 上下载一个...
详解vue-cli中配置sass
08-30
Vue CLI 中配置 Sass 在本文中，我们将详细介绍如何在 Vue CLI 中配置 Sass，这是前端开发中非常重要的一步。Sass 是一种基于 CSS 的扩展语言，它提供了许多有用的功能，可以帮助我们更好地编写 CSS 代码。 一、...
vue中使用 lang=“scss“ 报错
l13501058595的博客
10-22 1323
vue 使用 lang=“scss” 报错 在写VUE在线编辑器的时候，为了样式能够美观一些，在style中加入lang=“scss”，显示如下报错： 这是因为当前sass-loader的版本太高，webpack编译时出现了错误，所以我们安装低版本的 依次在项目中输入以下命令： npm install sass-loader@7.3.1 --save-dev npm install node-sass --save npm install style-loader --save 这样在使用lang="s
在vue-cili中使用scss在组件文件.vue中的style标签中输入属性lang=“scss“报错
zhangyubababa的博客
02-26 1528
Module build failed: Error: Missing binding E:\newsproject\node_modules_nod 一定能解决的办法： 在配置文件包package.json中修改sass-loader的版本号为7.3.1 重新装依赖 cnpm i 更新当前目录的依赖包npm update 重启项目 npm start即可完美解决！ 过程中调试使用到的命令有1 ...
vue中使用style lang="scss"报错(配置sass
庭落
09-18 4728
cnpm install sass-loader@7.3.1 --save-dev cnpm install node-sass --save 然后在webpack.base.conf.js的module中添加相关配置： { test: /\.s[a|c]ss$/, loader: 'style!css!sass' }
Vue学习踩坑之scss ＜style lang= “scss“ scoped＞
baidu_37132424的博客
12-06 2963
scoped局部部署，只在本页面生效，不写的话内部的css样式会在所有组件中渲染，浪费啊 我是直接下载的最新的6.0.1 ，结果入坑了 pm install node-sass --save-dev 如上图所述，请使用低版本4.0.0+的，那就卸载了，安装个低版本的呗 npm uninstall node-sass 卸载以后开始下载4.14.1版本的 npm install node-sass@4.14.1 --save-dev 好吧，小白一枚，一直以为是python3导致的问题，瞅.
vue -- style使用scss样式报错
weixin_30341745的博客
03-23 875
1、报错信息 2、解决方案（vue-li默认没有scss-loader,scss-loader）安装以下依赖 (1) npm install node-sass --save （2）npm install sass-loader --save (3)npm install scss --save (4)npm install scss...
vue：style标签中的scoped属性（作用域）和lang属性的介绍
诚的博客
07-30 4809
1、 什么是CSS预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。2、lang 因此lang的属性可选：scss（sass）、less等等 即：<style lang="scss">3、scss和sass的区别 scss是sass的一个升级版本，两者都是用来实现样式
Vue中＜style scoped lang=“scss“＞的含义
舒一笑的博客
03-01 2200
标签中使用的是SCSS语法编写的样式。SCSS是Sass（Syntactically Awesome Stylesheets）的一种语法，它是一种CSS预处理器，提供了许多有用的功能，如变量、嵌套规则、混合宏等，这些功能可以使CSS的编写更加简洁和强大。，编写普通的CSS代码也是完全没问题的，这使得你可以灵活地决定何时使用SCSS的额外特性。标签中写CSS时，这些CSS代码将按照常规CSS的方式工作，同时你也可以利用SCSS提供的额外功能，如变量、嵌套规则、混合宏等，来增强和简化你的样式编写。
vue项目 elementUI的style使用lang=“scss“出错
lk_csdn666的博客
05-25 704
1. 解决方案：需要引入sass-loader这种依赖包 npm install sass-loader --save; npm install node-sass --save; 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loaders: ['style','css','sass'] } 2. 安装node-sass出错 npm ERR! code ELIFECYCLE...
vue项目中scss样式的语法总结
weixin_46995731的博客
11-24 1972
vue项目中scss样式的语法总结 相信在写vue项目的时候,每个前端都有自已习惯的样式语法,比如css,stylus,scss等.在这里我给大家总结一下scss的语法. 为什么用scss呢? Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。 那么，它到底有哪些特性呢，我们来看一下: 安装 安装sass 依赖包 ，在cmd界面输入： npm install sass-loader --save-dev np
vuecli 5，vue2项目使用 webpack 工具对 scss less 样式进行预处理
05-10
VueCLI 5 中，默认使用了 webpack 5 作为构建工具，可以通过配置 webpack 配置文件实现对 scss 和 less 样式的预处理。 首先需要安装对应的 loader： ```bash npm install sass-loader sass webpack --save-dev npm install less-loader less webpack --save-dev ``` 然后在 webpack 配置文件中添加对应的 loader： ```javascript module.exports = { module: { rules: [ // 配置处理 scss 文件 { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] }, // 配置处理 less 文件 { test: /\.less$/, use: [ 'vue-style-loader', 'css-loader', 'less-loader' ] } ] } } ``` 在 Vue 组件中使用 scss 或 less 样式： ```vue <template> <div class="example-class"></div> </template> <style lang="scss"> .example-class { color: #fff; background-color: #000; } </style> <style lang="less"> .example-class { color: #fff; background-color: #000; } </style> ``` 这样就可以在 Vue 2 项目中使用 scss 或 less 样式进行预处理了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值