构建前端第3篇之---使用scss
张艳涛 写于2021-1-20
主要解决俩个问题:
- 在单个vue文件中 <style rel="stylesheet/scss" lang="scss"> 不能解析
- 如何在全局引入scss
What: scss是什么? scss是带有语法,可编程的css,比如说scss有变量,scss有嵌套结构,这些都是css没有的,如果style标签中使用的是scss是需要解析成css才能被识别,就好像java需要编译成二进制语言才能被计算机识别和执行.
问题1,不能解析的问题
如果是新建的vue工程在
<style rel="stylesheet/scss" lang="scss">
</style>
中式的scss是无法识别的
在根目录下package.json中的devDependencies中加入"node-sass": "^4.7.2","sass-loader": "7.0.3"
"devDependencies": {
.
.
.
"node-sass": "^4.7.2",
"sass-loader": "7.0.3"
},
在npm install就能识别出某个vue文件中<style标签中的scss
特别说明:有的文章说需要配置 在在build文件夹下的webpack.base.conf.js的 rules 标签下添加配置
{
test: /\.scss$/,
loaders:[ 'style-loader', 'css-loader' ]
}
在我使用的这个vue和webpack版本是不用的,是因为新版的vue-loader自带了css-loader,所以自己配的webpack config 里.css的loader删除掉就可以了,参考https://github.com/ElemeFE/element/issues/2541,如果你加了还可能报错:
ERROR Failed to compile with 1 errors 9:47:47
This dependency was not found:
element-ui/lib/theme-chalk/index.css in ./src/main.js
问题2,全局引入scss
在 main.js中引入
import '@/styles/index.scss' // global css
构建前端第3篇之---使用scss的更多相关文章
- 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入
张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...
- 构建前端第7篇之---elementUI设置主题,进而改变全局button底色
张艳涛写于2020-1-20 What:是elementUI主题? 是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题 设置步骤 在路径src/styl ...
- 构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>
张艳涛写于2021-1-20日 What: 如何让button的长度和input长度一致呢 最先想到的是给这个button加一个class ="buttonclass",然后在vu ...
- 构建前端第5篇之---修改css样式的思路
张艳涛写于2020-1-20 在页面元素布局的时候,在知道应该如何设置元素的属性的时候,可以依照如下思路,使用chrome浏览器,打开f12,找到对应的最近元素,看右侧对于的css样式窗口,调整修改数 ...
- 构建前端第4篇之---使用css用法 height
张艳涛 写于2021-1-20 height: 100%; What: html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...
- 构建前端第2篇之--ESLint 配置
张艳涛 写于2021-1-19 报错: http://eslint.org/docs/rules/space-before-function-paren Missing space before fu ...
- 构建前端第13篇之---VUE的method:{}的括号未括到方法导致 _vm.linkProps is not a function
- 构建前端第10篇之---Function.prototype.call()
张艳涛写于2020-01-25,参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ ...
- 构建前端第9篇之(下)---vue3.0将template转化为render的过程
vue3.0将template转化为render的过程 这里是简单标记下,如何将.vue转换成js文件 具体的,先不研究了,太深,能力有限,达不到呢
随机推荐
- 代码实测:给redis中的key取一个正确的名字多么重要
redis对写入的key长度有限制吗? 太长的key对性能有影响吗? key越长对性能影响越大? 如何评估键长度对性能的影响? talk is cheap, show me the code! 今天我 ...
- 面试总被问到HTTP缓存机制及原理?看完你就彻底明白了
前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能. 但是对于很多前端 ...
- Kubernetes集群安装
一.环境介绍 主机名 IP地址 master 192.168.0.100 node1 192.168.0.101 node2 192.168.0.102 1.1.操作系统: CensOS8.4.210 ...
- Qt实现网络聊天室(客户端,服务端)
1. 效果演示 客户端 服务器 连接成功之后 2. 预备知识 如果不知道网络编程的可以去看我的上一篇文章C++网络编程 在Qt中,实现网络编程的方式比用C++或C实现要方便简单许多,因为Qt已经替我们 ...
- 『心善渊』Selenium3.0基础 — 2、Selenium测试框架环境搭建(Windows)
目录 1.浏览器安装 2.浏览器驱动下载 (1)ChromeDriver for Chrome (2)Geckodriver for Firefox (3)IEDriverServer for IE ...
- Go语言中的有缓冲channel和无缓冲channel区别
Go语言中的有缓冲channel和无缓冲channel区别 结论 ch1:=make(chan int)// 无缓冲 ch2:=make(chan int,1)// 有缓冲 无缓冲: 当向ch1中存值 ...
- 为什么catch了异常,但事务还是回滚了?
前几天我发了这篇文章<我来出个题:这个事务会不会回滚?>得到了很多不错的反馈,也有不少读者通过微信.群或者邮件的方式,给了我一些关于test4的回复.其中还有直接发给我测试案例,来证明我的 ...
- excel vba的inputBox函数
Sub test1() Dim h Dim j As Integer j = 0 Dim n1 As Integer '分行单元格在第几列 Dim m1 As Integ ...
- 41、解决du与df统计不一致的解决方法
41.1.案例说明: 通过df -hT和du -sh /.du -h --max-depth=1 /命令 发现磁盘的使用不量不一致,使用'df -hT'命令查看磁盘的使用量要 比使用'du -sh / ...
- Libevent2.1.8版在Liunx中编译安装遇到的问题
Libevent2.1.8版在Liunx中编译安装遇到的问题 前言:在网上找了很久,都没有一个明确的解决方法,通过分析可能的原因,将自己实际操作及解决的成功结果记录如下,以供遇到相似的问题,能提供思路 ...