张艳涛 写于2021-1-20

主要解决俩个问题:

  1. 在单个vue文件中 <style rel="stylesheet/scss" lang="scss"> 不能解析
  2. 如何在全局引入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的更多相关文章

  1. 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

    张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...

  2. 构建前端第7篇之---elementUI设置主题,进而改变全局button底色

    张艳涛写于2020-1-20 What:是elementUI主题? 是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题 设置步骤 在路径src/styl ...

  3. 构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>

    张艳涛写于2021-1-20日 What: 如何让button的长度和input长度一致呢 最先想到的是给这个button加一个class ="buttonclass",然后在vu ...

  4. 构建前端第5篇之---修改css样式的思路

    张艳涛写于2020-1-20 在页面元素布局的时候,在知道应该如何设置元素的属性的时候,可以依照如下思路,使用chrome浏览器,打开f12,找到对应的最近元素,看右侧对于的css样式窗口,调整修改数 ...

  5. 构建前端第4篇之---使用css用法 height

    张艳涛 写于2021-1-20 height: 100%; What:  html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...

  6. 构建前端第2篇之--ESLint 配置

    张艳涛 写于2021-1-19 报错: http://eslint.org/docs/rules/space-before-function-paren Missing space before fu ...

  7. 构建前端第13篇之---VUE的method:{}的括号未括到方法导致 _vm.linkProps is not a function

  8. 构建前端第10篇之---Function.prototype.call()

    张艳涛写于2020-01-25,参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ ...

  9. 构建前端第9篇之(下)---vue3.0将template转化为render的过程

    vue3.0将template转化为render的过程 这里是简单标记下,如何将.vue转换成js文件 具体的,先不研究了,太深,能力有限,达不到呢

随机推荐

  1. 代码实测:给redis中的key取一个正确的名字多么重要

    redis对写入的key长度有限制吗? 太长的key对性能有影响吗? key越长对性能影响越大? 如何评估键长度对性能的影响? talk is cheap, show me the code! 今天我 ...

  2. 面试总被问到HTTP缓存机制及原理?看完你就彻底明白了

    前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能. 但是对于很多前端 ...

  3. Kubernetes集群安装

    一.环境介绍 主机名 IP地址 master 192.168.0.100 node1 192.168.0.101 node2 192.168.0.102 1.1.操作系统: CensOS8.4.210 ...

  4. Qt实现网络聊天室(客户端,服务端)

    1. 效果演示 客户端 服务器 连接成功之后 2. 预备知识 如果不知道网络编程的可以去看我的上一篇文章C++网络编程 在Qt中,实现网络编程的方式比用C++或C实现要方便简单许多,因为Qt已经替我们 ...

  5. 『心善渊』Selenium3.0基础 — 2、Selenium测试框架环境搭建(Windows)

    目录 1.浏览器安装 2.浏览器驱动下载 (1)ChromeDriver for Chrome (2)Geckodriver for Firefox (3)IEDriverServer for IE ...

  6. Go语言中的有缓冲channel和无缓冲channel区别

    Go语言中的有缓冲channel和无缓冲channel区别 结论 ch1:=make(chan int)// 无缓冲 ch2:=make(chan int,1)// 有缓冲 无缓冲: 当向ch1中存值 ...

  7. 为什么catch了异常,但事务还是回滚了?

    前几天我发了这篇文章<我来出个题:这个事务会不会回滚?>得到了很多不错的反馈,也有不少读者通过微信.群或者邮件的方式,给了我一些关于test4的回复.其中还有直接发给我测试案例,来证明我的 ...

  8. excel vba的inputBox函数

    Sub test1()    Dim h    Dim j As Integer    j = 0    Dim n1 As Integer '分行单元格在第几列    Dim m1 As Integ ...

  9. 41、解决du与df统计不一致的解决方法

    41.1.案例说明: 通过df -hT和du -sh /.du -h --max-depth=1 /命令 发现磁盘的使用不量不一致,使用'df -hT'命令查看磁盘的使用量要 比使用'du -sh / ...

  10. Libevent2.1.8版在Liunx中编译安装遇到的问题

    Libevent2.1.8版在Liunx中编译安装遇到的问题 前言:在网上找了很久,都没有一个明确的解决方法,通过分析可能的原因,将自己实际操作及解决的成功结果记录如下,以供遇到相似的问题,能提供思路 ...