• style增强特性
    • css预处理器
    • 样式引用
    • rpx转换

    style增强特性

    css预处理器

    mpx支持所有主流的css预编译处理，只需要在<style>的lang中设置使用的预编译语言（stylus/less/sass等）并且安装对应的webpack-loader即可正常使用。

    示例：

    1. <template>
    2.   <view class="container">
    3.     <text class="item">123</text>
    4.   </view>
    5. </template>
    7. <style lang="stylus">
    8. .container
    9.  padding 10px
    10.  .item
    11.      text-align center
    12. </style>

    样式引用

    两种方式引用：

    • style内使用@import语法引入
    • 在style标签上通过src引入

    前者会被内联打入 组件/页面 对应的wxss文件，后者则是会将src对应的文件收集到wxss文件夹里，再在 组件/页面 对应的wxss文件中通过@import引入。

    在一个mpx文件中，两者可以同时使用，例如：

    1. <!--src/components/test.mpx-->
    2. <!--省略template\script\json部分-->
    4. <!--这个部分的样式会被收集进wxss文件夹再被test.wxss引入-->
    5. <style src="../common/index.css"></style>
    7. <style>
    8. /*这个部分的代码会被内联打入test.wxss*/
    9. .test {
    10.   background-color: red;
    11. }
    12. </style>
    14. <!--也可以使用样式预处理语言比如sass、stylus、less等等-->
    15. <style lang="scss" src="../style/test.scss"></style>

    建议对于多个 页面/组件 公用的样式，使用src形式引入，避免一份样式被内联打成多份。

    rpx转换

    为了处理某些ide中不支持rpx单位的问题，mpx提供了一个将px转换为rpx的功能

    详情请查看mpx-loader选项