我们知道，在开发一个网页时，全局css这个东西相当的重要。它可以贯穿整个页面，统一页面的样式风格。那么，对于使用weex框架来写移动端应用的开发者来说，如何引入全局css呢？
在weex中，我们可以使用标签来添加css样式。但是，若我们有多个页面，每个页面中都要添加同样的样式，岂不是重复劳动？因此，我们需要使用一种更为优雅的方式来引入全局css。
<template>
<div class="container">
<div class="box">
<p>Hello, World!</p>
</div>
</div>
</template>
<style>
/* 这里是我们要引入的全局css */
.box {
width: 200px;
height: 200px;
background-color: #eee;
}
p {
font-size: 20px;
}
</style>从上面的代码可以看出，我们使用了一个.vue文件作为示例来讲解如何引入全局css。在这个.vue文件中，我们定义了一个.container的容器，其中包含一个.box的盒子和一个Hello, World!的文字。
在style标签中，我们定义了.box的样式和p标签的样式。为了可以在其他.vue文件中共用这个样式，我们需要把这些样式写入一个单独的css文件中，比如global.css。
// global.css
.box {
width: 200px;
height: 200px;
background-color: #eee;
}
p {
font-size: 20px;
}这里，我们把.box和p的样式从我们的.vue文件中移动到了global.css文件中。为了引入这个全局css文件，我们需要在webpack.config.js（或者是其他的打包工具配置文件）中做一些修改。
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/app.vue',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'weex-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
vue: {
loaders: {
css: ['vue-style-loader', {
loader: 'css-loader',
options: {
importLoaders: 1
}
}],
less: ['vue-style-loader', {
loader: 'css-loader!less-loader'
}]
}
}
}
})
]
};我们在webpack.config.js的rules中加入了对.css文件的处理，以便在.vue文件中引入global.css。同时，在plugins中配置vue的loader来加载css。
到这里，我们就可以愉快地在我们的.vue文件中使用全局css了。