构建前端第3篇之---使用scss
2024-10-03 07:19:13
张艳涛 写于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
最新文章
- Shell文本处理 - 分割合并与过滤
- Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)
- ubifs总体设计分析
- 【MVC 4】1.第一个 MVC 应用程序
- Problem A+B(Big Integer)
- the behavior of the UICollectionViewFlowLayout is not defined because:
- 在实体注解OneToMany时,要加上mappedby,避免产生中间表。
- 安全控件开发原理分析 支付宝安全控件开发 C++
- python标准库基础之mmap:内存映射文件
- 基于TCP套接字实现的简单Demo
- 安装jdk和tomcat
- 获取IP-linux(经典-实用)
- 2019年桌面Linux需要做好的7件事
- JVM源码分析之SystemGC完全解读
- C-Language Functions
- Docker部署Vue 工程包
- MS SQL的某一数据库成了Single User模式
- CSS3 Day1 练习
- STA分析(二) multi_cycle and false
- JVM配置参数