预处理器
优质
小牛编辑
133浏览
2023-12-01
得益于 vue-loader, 我们可以通过 lang
属性在组件中的<template>
, <script>
或 <style>
上使用各种预处理器。
举个例子,我们在 pages/index.vue
组件中使用 Pug, CoffeeScript 和 Sass:
<template lang="pug">
h1.red Hello {{ name }}!
</template>
<script lang="coffee">
export default data: ->
{ name: 'World' }
</script>
<style lang="sass">
.red
color: red
</style>
<style lang="scss">
.red {
color: red
}
</style>
记得安装这些预处理器对应的 npm 依赖包和 Webpack 加载器:
npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader