vue项目使用sass

一：定义：

sass 是一种预处理器脚本语言，可以解释或编译成层叠样式表。

node-sass 是一个库，目前发现的主要功能是可以允许样式的值的重复使用。

二：

第一步，nodejs安装 node-sass,sass-loader

第二步，在build.js 中的webpack.base.conf.js中添加代码：

{
  test: /\.scss$/,
  loader: 'sass-loader!style-loader!css-loader',
}

第三步,在.vue文件中，添加lang="scss"

<style scoped lang="scss">
 

vue项目中使用sass 完成准备，可以写样式,以及引入文件后缀为.scss

<style scoped lang="scss">

import "@/xxxxxx.scss"

$haha:red

h1{color:$haha;}

</style>

--------------------------------------------------------------

第一步要注意node 版本和node-sass与sass-loader的版本问题,否则会报错: this.getOptions is not a function

node -v  v14.15.1

node-sass 4.14.1 与sass-loader的版本 7.3.1

---------------------------------------------------------------------------------------------------------------------------