微信小程序的样式作用范围(基本使用)

在微信小程序中,页面和组件不是同一个概念

组件中定义的样式的作用范围

1. 仅限该组件

页面中定义的样式的作用范围

1. 该页面
2. 该页面的组件
3. 该页面的组件内的组件

也就是说,如果你的a页面中有b组件,b组件中有c组件
那么如果需要自定义c组件中的某些样式
有两种做法

1. 在c组件中改变样式(但是如果c组件或者第三方组件库,改起来不方便)
2. 在a页面中改c组件的样式(这个方法可以直接生效)

方法2代码如下

//a页面
.c-view{
	background:#f00;
}

<!-- c组件 -->
<view class="c-view"></view>

开启sass编译

// project.config.json
{
	"useCompilerPlugins": ["sass"]
}

// /style/index.scss
@import "./mixins.scss";
@import "./vars.scss";
@import "./classes.scss";

// /styles/mixins.scss
@mixin flex(/* ...... */){
	//	......
};

// /styles/classes.scss
.pad20{
	padding:20rpx;
};

// /app.scss
@import "./styles/index.scss";



// /pages/index/index.wxml
// 不用引入app.scss,可以直接使用.pad20类样式
// 引入app.scss,可以使用@include flex(......)

不用引入app.scss,可以直接使用.pad20类样式
引入app.scss,可以使用@include flex(…)