首先安装sass依赖包:
npm install sass-loader --save-dev
npm install node-sass --save-dev
然后在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loader: ['style','css','sass']
}
使用scss的时候在所在style样式标签上添加lang="scss"即可使用
以下附上部分sass在项目中的使用
<template>
<div>
<h1>sssss</h1>
<div class="content">
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
<p>wwwwww</p>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
//导入外部scss文件:@import './test.scss';
//变量
$font-size-20:20px;
$primary-color:#38f;
$background-color:yellow;
$width:800px;
h1{
font-style: $font-size-20;
color: $primary-color;
}
//混合
@mixin border-radius($radius){
border-radius: $radius;
-ms-border-radius:$radius;
-o-border-radius:$radius;
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
}
//继承
%content-message{
color: $primary-color;
font-size: $font-size-20;
border: 2px solid red;
}
@function reduced($initialStyle){
@return $initialStyle / 10 * 1rem;
}
.content{
margin: 20px auto;
width: $width;
ul{
list-style: none;
width: 300px / 750px * 100%;//操作符的使用
li{
@extend %content-message;//继承的使用
@include border-radius(10px);//混合的使用
&:hover{
background-color: $background-color;
}
}
}
p{
width: reduced(300);
height: reduced(20);
line-height: reduced(20);
border-radius: reduced(50);
@extend %content-message;
}
}
</style>