Weex安装使用CSS预处理工具

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/89600297

Weex使用Less

• 安装

npm install --save less

npm install --save less-loader 

• 配置vue-loader

项目/config/vue-loader.conf.js 配置相关

module.exports = (options) => {
  return {
    loaders: utils.cssLoaders({
      // sourceMap: use sourcemao or not.
      sourceMap: options && sourceMapEnabled,
      // useVue: use vue-style-loader or not
      useVue: options && options.useVue,
      // usePostCSS: use postcss to compile styles.
      usePostCSS: options && options.usePostCSS
    }),
    cssSourceMap: sourceMapEnabled,
    cacheBusting: config.dev.cacheBusting,

    lang:{
      'less':['less-loader']
    }
  }
}

项目中使用Less

<style lang="less" scoped>
@color: red;

.message {
    color: @color;
}
</style>

• 屏幕的宽度统一为 750 像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。
• 标准 CSS 支持很多样式选择器，但 Weex 目前只支持单个 class name 的选择器。标签、name等设置无效果
• 标准 CSS 支持很多的长度单位，但 Weex 目前只支持像素，并且 px 单位可以忽略不写，直接使用对应的数值
• 与标准 CSS 不同子元素的样式不会继承自父元素，只能在当前标签单独设置样式

.message { width: 600; }

• 标准 CSS 包含了非常多的样式属性，但 Weex 只支持了其中的一部分，比如盒模型、flexbox、position 等布局属性，以及 font-size、color 等其它样式。
• Weex官方通用样式