.vue格式的文件使用类似HTML的语法描述vue组件。每个.vue文件包含三种最基本的语言块:,
vue-loader会解析这个文件中的每个语言块,然后传输到其它的loaders,最终输出到module.exports是vue组件的配置对象的CommonJS模块。
vue-loader通过指定语言块的lang属性支持css预编译、html编译模板等语言格式。如在组件的style块中使用sass
语言块
src 引入
如果你习惯将*.vue组件分割成多个文件,可以使用语言块的src属性把扩展文件引入到组件中。
转换为:
注:
1 . 在同一个组件可以包含局部和全局样式
- 子组件的根节点会受到父组件和本组件的局部css样式影响
- Partials are not affected by scoped styles.
- 有了局部样式仍然需要类选择器
- 在包含迭代组件的组件中小心使用子孙选择器。一条关于.a .b的css规则,如果在类名为a的标签中使用了子组件,那么子组件中的类名为b的标签也会应用这条规则。
CSS 模块化
CSS Modules便于实现css模块化,vue-loader通过模仿css的scope提供了module来实现css模块化集成。
使用在
这样打开CSS Module模式,class对象会作为$style的属性注入到组件中,进而在中进行动态的类绑定
style中的类作为被计算的属性,也可以在:class中使用数组或者对象语法
或者在js中获取使用它
自定义注入名
由于一个vue组件可以包含多个
<style module="b">
/ identifiers injected as $b /
配置css-loader
用css-loader来处理CSS Modules,以下是css-loader对
通过vue-loader的cssModules配置项定制css-loader
module: {
rules: [
{
test: '.vue$',loader: 'vue',options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',camelCase: true
}
}
}
]
}
PostCSS
任何vue-loader处理输出的css都经过PostCSS进行局部css重写,我们也可以增加PostCSS插件进行这些处理,如autoprefixer和 CSSNext。
Webpack 1.x用法:
Webpack 2.x用法:
热加载
热加载不只是修改文件后页面的刷新。修改某个.vue组件后,页面中这个组件的所有实例都会被替换而不重载页面,它还保存了应用的当前状态以及被替换的组件。
如果使用了vue-cli搭建项目,自带了热加载。