Vue项目下使用Sass

优势

Sass是CSS预编译器，使CSS编写简单，容易维护，从而大大节省开发时间。Sass目前全面兼容CSS

环境

node v8.9.1
npm v5.6.0
Vue.js v2.x
webpack v3.10.0'

安装sass的依赖包

$ npm install --save-dev sass-loader

$ npm install --save-dev node-sassnpm install --save-dev node-sass

使用方法

<style lang="scss">
    $color: blue;
    .text {
        color: $color;
    }
</style>

导入方法

在你的项目里使用自定义sass文件

1.在main.js文件中添加以下语句

import '@/assets/css/app.scss'

2.在Vue文件的style标签下导入

<style lang="scss">
    @import '@/assets/css/app'
</style>

开始测试

Sass学习链接

sass中文网 [https://www.sass.hk/guide/]

写在最后

初次使用sass，仅供参考。如有错误，为了不误导其他人,请您见谅并指出。谢谢您的阅读