Weex项目中引用css样式的三种姿势

逐步对Weex进行探索，踩了不少坑，现分享下在Weex项目中如何引用css样式。

方案一：*.vue页面内嵌样式

打开 src/foo.vue 文件,在style标签内部编写样式。
缺点：多个页面无法复用，页面样式多了显得庞大繁杂

<template>
  <div>
    <div class="base"></div>
  </div>
</template>

<style>
.base {
  background-color:green;
  height: 100px;
  width:100px;
}
</style>

方案二：采用link的方式引入样式

这里说的link跟我们传统通过link标签引入有些许不同。传统的web的做法是:

 <link href="css/style.css" rel="stylesheet" />

在*.vue页面应该这样：

<style src='./style.css' />

为啥能够这样用呢？因为 css-loader。对于Weex的标准工程，这个loader在package.json里面已经内置了。

方案三：基于sass编写样式

在标准的weex工程里面，需要先安装几个依赖：

npm install node-sass;
npm install sass-loader; //依赖node-sass

耐心等待漫长的安装过程。之后配置loader，打开webpack.config.js，修改loader这里：

loaders: [
        {
          test: /\.scss$/,
          loader: "css!sass",//这样写样式和脚本会混在一个文件，也就是不分离样式，webpack有插件可以实现分离样式
          exclude: /node_modules/
        }
      ]

其中上面的loader是用于解析.scss文件,之后就可以用 import 或 require 引入的sass文件进行加载，以及声明的内部样式进行加载。

<style lang="sass">
//方式一：import
@import "./foo.scss";
//方式二：直接写sass语法样式
</style>

笔者尝试在 script里面通过require的方式来加载scss文件，结果无法加载，可能是weex项目的坑，不建议如下用法：

<script>
require("./foo.scss")
</script>