美文网首页
vue2.0 基础 ——项目开发中使用的预编译语言配置sass

vue2.0 基础 ——项目开发中使用的预编译语言配置sass

作者: 皇甫圣坤 | 来源:发表于2019-03-29 15:01 被阅读0次

编写的时候用预编译语言编写样式会比较方便。我尝试过两种:stylus, scss(目前是在用这个)

stylus~学习教程: 张鑫旭老师的stylus教程~
sass~学习资料见sass中文网

如何配置?下边两个选一个预编译工具安装就好。

sass

需要安装 node-sass 以及 sass-loader
node-sass 我每次 npm 安装都会失败,这时候,用淘宝镜像安装就可以了:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install node-sass --save-dev

安装成功后再安装 sass-loader

$ npm install sass-loader --save

stylus

则需要安装 stylus,stylus-loader

<template>
  <div>我是模板内容</div>
</template>

<script>
  export default{}
</script>

<style lang="stylus" rel="stylesheet/stylus">    // stylus 预编译
</style>

// <style lang="scss">           // scss 预编译
// </style>

使用scoped属性可以将样式只应用于当前组件中

<template>
</template>
<script>
</script>
<style scoped>
</style>

相关文章

网友评论

      本文标题:vue2.0 基础 ——项目开发中使用的预编译语言配置sass

      本文链接:https://www.haomeiwen.com/subject/vnpmvqtx.html