1.创建自己的Vue项目
2.按照Sass依赖包
npm install sass-loader node-sass --save-dev
因为sass-loader需要node-sass和webpack 作为peerDependency
。
3.在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test:/\.scss$/,
loaders:['style','css','sass']
},
4.在需要用到scss的XXX.vue文件的style标签是写入:lang="scss"
<style lang="scss">
随便写一下如下:
<template>
<div id="app">
<div class="container">
<p>sass引入成功</p>
</div>
</div>
</template>
<style lang="scss">
.container{
width: 100px;
height: 100px;
background: yellow;
p{
color:red
}
}
</style>
5.运行起来看看效果(npm run dev)
【注:修改webpack文件之后,必须要重新启动一下项目,不然是没有效果的】