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

前端  /  管理员 发布于 7年前   225

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

1.初始化一个 weex 工程

npm install weex-toolkit -gweex create weex-testcd weex-testnpm run start

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

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

npm install -D [email protected] node-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 页面引用

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

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

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

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

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

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

$namespace: '';$element-separator: '__';$modifier-separator: '--';@mixin b($block) {  @if $namespace == '' {    $B: $block !global;  } @else {    $B: $namespace+'-'+$block !global;  }  @if '#{&}' == '' {    .#{$B} {      @content;    }  } @else {    @at-root {      .#{$B} {        @content;      }    }  }}@mixin e($element) {  $E: $element !global;  $selector: &;  @if str-index('#{&}', '__') {    @at-root {      .#{$B + $element-separator + $element} {        @content;      }    }  } @else {    @at-root {      #{&+$element-separator+$E} {        @content;      }    }  }}@mixin m($modifier)   $M: $modifier !global;  @at-root {    #{&+$modifier-separator+$M} {      @content;    }  }}

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

编译后的样式为：

.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文件

npm install -D sass-resources-loader

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

 const generateLoaders = (loader, loaderOptions) => {  let loaders = 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 {   return loaders  } }

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

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

您可能感兴趣的文章:

• Weex开发之地图篇的具体使用
• WEEX环境搭建与入门详解
• 适合前端Vue开发童鞋的跨平台Weex的使用详解
• 详解weex默认webpack.config.js改造
• weex里Vuex state使用storage持久化详解
• weex slider实现滑动底部导航功能
• 详解Weex基于Vue2.0开发模板搭建