主页（八）-配置less或sass预处理环境 & less文件要写成嵌套关系

配置less或sass环境

安装相关依赖包

npm install node-sass sass-loader -D

npm install less less-loader -D

样式标签配置scss <style scoped lang='scss'> @import 'main.scss' </style>

第一步：安装less包或sass包

第二步：在所需页面home文件夹下，新建main.less样式文件

第三步：把home文件夹下的index.vue文件里面的样式文件，剪切粘贴到main.less中

注意：如果样式标签有嵌套关系，需要进行整合，不要扁平化，而要写成嵌套关系

swiper { img { width: 750rpx; } } .menu { display: flex; padding: 10rpx; img { flex: 1; height: 160rpx; } } .floor { .floor-title { padding: 10rpx; background-color: #eee; img { height: 100rpx; } } .floor-content { display: flex; padding: 20rpx; .left { padding-right: 10rpx; img { width:232rpx; height:385rpx; } } .right { flex: 1; display: flex; justify-content: space-between; flex-wrap: wrap; img { width:232rpx; height:188rpx; border-radius:4px; } } } } .totop { position: fixed; bottom: 50rpx; right: 50rpx; border-radius: 50rpx; width: 100rpx; height: 100rpx; background: rgb(255, 255, 255, 0.5); text-align: center; font-size: 14px; }

第四步：在所需页面home/index.vue文件中的样式模块里，进行引入main.less文件

<style scoped lang='less'> @import './main.less'; </style>

文件结构为