修改 webpack.config.js
使其能监听 scss
类型文件的变化,从而自动更新网页
webpack.config.js
module.exports = {
devServer: {
watchFiles: [
// ...
"./src/style/*.scss",
],
},
};
创建 src/style/01-linear-gradient.scss
.example {
width: 150px;
height: 80px;
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
// 默认的渐变方向是 从上到下
.example1 {
background: linear-gradient(#ace, #fc9);
}
// 从左到右
.example2 {
background: linear-gradient(to Right, #ace, #fc9);
}
// 从下到上
.example3 {
background: linear-gradient(to Top, #ace, #fc9);
}
// 从右到左
.example4 {
background: linear-gradient(to Left, #ace, #fc9);
}
// 渐变的起始角度 45deg 为左下角
.example5 {
background: linear-gradient(45deg, #ace, #fc9);
}
// 渐变的起始角度 -45deg 为右下角
.example6 {
background: linear-gradient(-45deg, #ace, #fc9);
}
// 渐变的起始角度 135deg 为左上角
.example7 {
background: linear-gradient(135deg, #ace, #fc9);
}
// 渐变的起始角度 -135deg 为右上角
.example8 {
background: linear-gradient(-135deg, #ace, #fc9);
}
// 可以指定多个颜色,颜色均匀分布
.example9 {
background: linear-gradient(to Right, #ace, #fc9, #ace, #fc9, #ace);
}
// 颜色也可以指定渲染的位置
.example10 {
background: linear-gradient(to Right, #ace, #fc9 5%, #ace, #fc9 95%, #ace);
}
// 颜色也可以指定渲染的位置
.example11 {
background: linear-gradient(to Right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)),
url("https://cdn.pixabay.com/photo/2020/12/03/20/25/girl-5801502_960_720.jpg");
background-size: 100% 100%;
}
index.html
的内容修改为
<div class="example example1"></div>
<div class="example example2"></div>
<div class="example example3"></div>
<div class="example example4"></div>
<div class="example example5"></div>
<div class="example example6"></div>
<div class="example example7"></div>
<div class="example example8"></div>
<div class="example example9"></div>
<div class="example example10"></div>
<div class="example example11"></div>
在 src/index.js
中导入 线性渐变的 scss
代码
// import './style/index.css'
// import './style/index.scss'
import "./style/01-linear-gradient.scss";
网友评论