美文网首页
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