构建前端第3篇之---使用scss

张艳涛 写于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