CSS 处理

CSS 预编译

Mpx 支持 CSS 预编译处理，你可以通过在 style 标签上设置 lang 属性，来指定使用的 CSS 预处理器，此外需要在对应的 webpack 配置文件中 加入对应的 loader 配置

<!-- 使用 stylus -->
<style lang="stylus">
  .nav
    width 100px
    height 80px
    color #f90
    &:hover
      background-color #f40
      color #fff
</style>

// getRules 配置文件
rules: [
    {
        test: /\.styl(us)?$/,
        use: [
            MpxWebpackPlugin.wxssLoader(),
            'stylus-loader'
        ]
    }
]

<!-- 使用 sass  -->
<style lang="scss">
  .nav {
    width: 100px;
    height: 80px;
    color: #f90
    &:hover {
      background-color: #f40;
      color: #fff
    }
  }
</style>

// getRules 配置文件
rules: [
    {
        test: /\.scss$/,
        use: [
            'css-loader',
            'sass-loader'
        ]
    }
]

<!-- 使用 less -->
<style lang="less">
  .size {
    width: 100px;
    height: 80px
  }
  .nav {
    .size();
    color: #f90;
    &:hover {
      background-color: #f40;
      color: #fff
    }
  }
</style>

// getRules 配置文件
rules: [
    {
        test: /\.less$/,
        use: [
            'css-loader',
            'less-loader'
        ]
    }
]

公共样式复用

为了达到最大限度的样式复用，Mpx 提供了以下两种方式实现公共样式抽离，但是最终打包的效果有所区别。

// styles/mixin.styl
.header-styl
  width 100%
  height 100px
  background-color #f00

style src 复用

通过给 style 标签添加 src 属性引入外部样式，最终公共样式代码只会打包一份。

<!-- index.mpx -->
<style lang="stylus" src="../styles/common.styl"></style>

<!-- list.mpx -->
<style lang="stylus" src="../styles/common.styl"></style>

Mpx 将 common.styl 中的代码经过 loader 编译后生成一份单独的 wxss 文件，这样既实现了样式抽离，又能节省打包后的代码体积。

@import 复用

如果指定 style 标签的 lang 属性并且使用 @import 导入样式，那么这个文件经过对应的 loader 处理之后的内容会重复打包到引用它的文件目录下，并不会抽离成单独的文件，这样无形中增加了代码体积。

<!-- index.mpx -->
<style lang="stylus">
  @import "../styles/mixin.styl"
</style>

<!-- list.mpx -->
<style lang="less">
  @import "../styles/mixin.less";
</style>

如果导入的是一份 css 文件，则最终打包后的效果与 style src 一致。

// styles/mixin.css
.header-css {
  width: 100%;
  height: 100px;
  background-color: #f00;
}

<!-- index.mpx -->
<style>
  @import "../styles/mixin.css";
</style>

<!-- list.mpx -->
<style>
  @import "../styles/mixin.css";
</style>

对于多个页面或组件公用的样式，建议使用 style src 形式引入，避免一份样式被内联打成多份，同时还能使用 less、scss 等提升编码效率。