Vue项目中sass语法该怎么用?
最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些解决办法也比较乱,下面是我亲测切实可行的方法,给大家做一分享!
在Chrome浏览器中的错误:
就是不能解析sass-loader 这种东西。
所以第一步需要在项目中引入:
1. npm install sass-loader -D
2..npm install node-sass -D
第一个很快引入成功:
但是在第二个却出了错误:
但是我再用cnpm install node-sass -D 却成功了!!!(现在比较渣,也不知道是什么原因)
这样项目就能够成功运行了:
如果还是不行的话,可以继续下面的操作:
下面是官方Sass Loader的引入方法Sass Loade官方仓库:
npm install sass-loader node-sass webpack --save-dev
npm install style-loader css-loader --save-dev
在web pack.base.conf.js 里面加
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
},
Vue项目中sass语法该怎么用?的更多相关文章
- vue项目中快捷语法糖
1.Vue.js是渐进式框架,采用自底向上增量开发的设计基于MVVM思想. 2.Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 3.Vue.js 的目标是通过尽可能简 ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- Vue项目中如何使用Element-UI以及如何使用sass
Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...
- vue入坑教程(二)在vue项目中如何导入element以及sass
在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 在vue-cli建的vue项目中使用sass
前面已使用vue-cli新建了一个vue项目,参考 使用命令行创建一个vue项目的全部命令及结果 首先看下新建项目的页面和代码,有部分修改,可忽视,如下图: 然后我们在页面添加sass的代码 ...
- Vue项目引入sass
最近两天手头的事情暂时搞完了,可以抽出空来学习一下东西,之前项目都是鹏哥搭建好了,我们在直接在里面写代码,sass语法用来写样式还是比较方便常用的,今天就来试试怎么引入和配置sass 参考文章:Vue ...
- 如何在VUE项目中使用SCSS
首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- 在多租户(容器)数据库中如何创建PDB:方法6 DBCA本地克隆PDB
基于版本:19c (12.2.0.3) AskScuti 创建方法:DBCA静默本地克隆PDB.根据 CDB1 中的 PDB1 克隆出 CDB1 中的 PDB_CLONE 对应路径:Creating ...
- django 完成登录功能
啃了几天文档,感觉能理解了这个框架,但是真的下手的时候真的不知道从何开始. orm即Object-Relationl Mapping,看这名字就是操作数据库的,用过ssm,不过django操作数据库是 ...
- [lua]紫猫lua教程-命令宝典-L1-01-11. lua的个人补充
1.关于三目运算符的一些补充和纠正 前面没看仔细 a>b ? a: b 这个形式 似乎lua下并不存在...要了命 一般都是使用 a and b or c 的形式 但是这种形式存在一些问题 ...
- 【Python】【爬虫】爬取酷狗TOP500
好啦好啦,那我们来拉开我们的爬虫之旅吧~~~ 这一只小爬虫是爬取酷狗TOP500的,使用的爬取手法简单粗暴,目的是帮大家初步窥探爬虫长啥样,后期会慢慢变得健壮起来的. 环境配置 在此之前需要下载一个谷 ...
- ios 下 select和option 无法隐藏指定元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- node.js 和 yarn 安装
电脑环境 windows10 专业版 64 位 node.js 安装 Node.js 官方网站下载:https://nodejs.org/en/ 之后一步步得傻瓜式安装 配置环境变量和查看node.j ...
- org.apache.httpcomponents.httpclient
apache org doc :http://hc.apache.org/httpcomponents-client-ga/tutorial/html/fundamentals.html#d5e49 ...
- bbs系统的相关知识点
1.注册功能 1.注册功能往往都会由很多校验性的需求 所以这里我们用到了forms组件 项目中可能有多个地方需要用到不同的forms组件 为了解耦合 但是创建一个py文件 专门用来存放项目用到的所有的 ...
- vue+vuex项目中怎么实现input模糊查询
1,首先给input框添加方法,但是用的是element-ui的组件,对input进行了封装,不能直接用原生的方法!,在element组件中,input框中方法有实例参数$event,代表事件对象 ...
- js实现Set
class MySet { constructor(params) { if (typeof params[Symbol.iterator] !== 'function') { throw new T ...