vue文件组件也支持CSS预处理语言,比如scss或者less。如需使用scss,定义lang属性即可:
<style lang="scss" scoped>...</style>
webpack.config中需要加载vue-loader来解析.vue文件(下面配置支持在vue组件中使用scss语法)。
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
......
]
},
引用组件时,名称可以自定义,如下,导入时我将child组件命名为c:
import c from './child'
export default {
name: "father",
components:{'child-com':c},
data(){
return {text:"this is father components"}
}
}