.vue格式的文件使用类似HTML的语法描述vue组件。每个.vue文件包含三种最基本的语言块：,
403_3@
@H_403_3@
vue-loader会解析这个文件中的每个语言块，然后传输到其它的loaders，最终输出到module.exports是vue组件的配置对象的CommonJS模块。
vue-loader通过指定语言块的lang属性支持css预编译、html编译模板等语言格式。如在组件的style块中使用sass
@H_403_3@
语言块
src 引入
如果你习惯将*.vue组件分割成多个文件，可以使用语言块的src属性把扩展文件引入到组件中。
403_3@
@H_403_3@
转换为：
.example[_v-f3f3eg9] {
color: red;
}
hi@H_403_3@
@H_403_3@
注：
1 . 在同一个组件可以包含局部和全局样式
/* global styles */
@H_403_3@
- 子组件的根节点会受到父组件和本组件的局部css样式影响
- Partials are not affected by scoped styles.
- 有了局部样式仍然需要类选择器
- 在包含迭代组件的组件中小心使用子孙选择器。一条关于.a .b的css规则，如果在类名为a的标签中使用了子组件，那么子组件中的类名为b的标签也会应用这条规则。
CSS 模块化
CSS Modules便于实现css模块化，vue-loader通过模仿css的scope提供了module来实现css模块化集成。
使用在
.red {
color: red;
}
.bold {
font-weight: bold;
}
@H_403_3@
这样打开CSS Module模式，class对象会作为$style的属性注入到组件中，进而在中进行动态的类绑定
@H_403_3@
style中的类作为被计算的属性，也可以在：class中使用数组或者对象语法
或者在js中获取使用它
export default {
created () {
console.log(this.$style.red)
// -> "_1VyoJ-uZOjlOxP7jWUy19_0"
// an identifier generated based on filename and className.
}
}
@H_403_3@
自定义注入名
由于一个vue组件可以包含多个
<style module="b">
/ identifiers injected as $b /
配置css-loader
用css-loader来处理CSS Modules，以下是css-loader对
@H_403_3@
通过vue-loader的cssModules配置项定制css-loader
// webpack 2
module: {
rules: [
{
test: '.vue$',loader: 'vue',options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',camelCase: true
}
}
}
]
} @H_403_3@
module: {
rules: [
{
test: '.vue$',loader: 'vue',options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',camelCase: true
}
}
}
]
} @H_403_3@
PostCSS
任何vue-loader处理输出的css都经过PostCSS进行局部css重写，我们也可以增加PostCSS插件进行这些处理，如autoprefixer和 CSSNext。
Webpack 1.x用法：
