在weex中愉快的使用scss的方法步骤

2023-08-03 16:28:07 63

weex是一个可以利用vue或者Rax编写跨平台手机应用的框架。为了让在weex有更好的样式编写体验，遂有了以下的方案。

1.初始化一个weex工程

npminstallweex-toolkit-g
weexcreateweex-test
cdweex-test
npmrunstart

这时候就可以在浏览器看到界面了

2.接着为了可以在vue里面写scss，我们需要安装两个东西，sass-loader、node-sass

npminstall-Dsass-loader@7.3.1node-sass

在这里要注意一点sass-loader要安装7版本的，不然会报错，这是因为sass版本高导致的，接下来就可以愉快的写scss，还要注意一点需要在style标签加上语言标记scss

3.为了更好的组织项目结够和样式的统一，我们会把一些主题颜色、字体大小、文字颜色提取到一个scss文件,我们把它命名为variable.scss如下：

$theme-color:blue;

$font-big:32px;
$font-nor:28px;
$font-small:24px;

我们把它放到项目的src/common/scss下，需要的时候就在vue文件中引用,比如在index.vue页面引用


@import'./common/scss/variable.scss'
div{
background-color:$theme-color;
}

这样就可以让应用的主体部分的样式保持一致了。

4.在weex中有一些属性不支持简写的方式比如border，还有一些需要写两三条的样式如文字超出隐藏，这种样式我们可以将它们定义成scss的混合宏（mixin）,我们把它命名为mixins.scss

@mixinborder($width,$style,$color){
border-width:$width;
border-style:$style;
border-color:$color;
}
@mixinborder-top($width,$style,$color){
border-top-width:$width;
border-top-style:$style;
border-top-color:$color;
}

我们把它放到项目的src/common/scss下，需要的时候就在vue文件中引用,比如在index.vue页面引用


@import'./common/scss/variable.scss';
@import'./common/scss/mixins.scss';
div{
@includeborder(1px,solid,$theme-color);
}

这样我们就可以将一些常用的css代码写进混合宏了

5.在weex中由于不支持类名的权重覆盖，只支持后面的定义的同类样式覆盖前面的样式，这样就会导致我们不能很好的组织css代码，又不能利用scss的优势代码层级嵌套。为此我们引入BEM命名方法，并通过scss的混合宏让其在写法上支持嵌套，首先我们在src/common/scss下创建bem.scss，并写入如下代码：

$namespace:'';
$element-separator:'__';
$modifier-separator:'--';

@mixinb($block){
@if$namespace==''{
$B:$block!global;
}@else{
$B:$namespace+'-'+$block!global;
}

@if'#{&}'==''{
.#{$B}{
@content;
}
}@else{
@at-root{
.#{$B}{
@content;
}
}
}

}

@mixine($element){
$E:$element!global;
$selector:&;

@ifstr-index('#{&}','__'){
@at-root{
.#{$B+$element-separator+$element}{
@content;
}
}
}@else{
@at-root{
#{&+$element-separator+$E}{
@content;
}
}
}

}
@mixinm($modifier)
$M:$modifier!global;
@at-root{
#{&+$modifier-separator+$M}{
@content;
}
}
}

由于weex不支持层级所以我们只能用@at-root将所有类名提升到第一层。接着我们在index.vue中引入这个文件：




@import'./common/scss/variable.scss';
@import'./common/scss/mixins.scss';
@import'./common/scss/bem.scss'

@includeb('header'){
height:100px;
width:750px;
flex-direction:row;
align-items:center;
@includee('back'){
flex:1;
@includem('black'){
background-color:#000000;
}
@includem('white'){
background-color:#ffffff;
}
}
@includee('content'){
flex:3;
}
@includee('other'){
flex:1;
}
}

编译后的样式为：

.header{
height:100px;
width:750px;
flex-direction:row;
align-items:center;
}
.header__back{
flex:1;
}
.header__back--black{
background-color:#000000;
}
.header__back--white{
background-color:#ffffff;
}
.header__content{
flex:3;
}
.header__other{
flex:1;
}

这样看起来用scss的写法代码的结构性和可维护性就会更好一些。

6.由于这三个文件都是需要在每一个vue文件引入的，为了偷一下懒，我们可以用sass-resources-loader这个loader来让每一个vue文件都注入这几个scss文件

npminstall-Dsass-resources-loader

然后修改根目录下的configs/utils.js,找到如下，进行更改

constgenerateLoaders=(loader,loaderOptions)=>{
letloaders=options.useVue?[cssLoader]:[]
if(options.usePostCSS){
loaders.push(postcssLoader)
}
if(loader){
loaders.push({
loader:loader+'-loader',
options:Object.assign({},loaderOptions,{
sourceMap:options.sourceMap
})
})
}

//这里加入以下代码
if(loader==='sass'){
loaders.push({
loader:'sass-resources-loader',
options:{
resources:[
path.resolve(__dirname,'../src/common/scss/variable.scss'),
path.resolve(__dirname,'../src/common/scss/mixins.scss'),
path.resolve(__dirname,'../src/common/scss/bem.scss')
]
}
})
}

if(options.useVue){
return['vue-style-loader'].concat(loaders)
}
else{
returnloaders
}
}

这样就可以在weex工程中愉快的编写scss了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

在weex中愉快的使用scss的方法步骤

热门推荐

随机推荐