如何在vue中使用sass

全局安装 vue-cli

npm install --global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack my-project

安装依赖

cd my-project
npm install

为了使用sass，我们需要安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

修改style标签

打开src目录下的components目录中的Hello.vue文件。
然后修改 style标签如下

<style lang="sass">

然后运行项目

npm run dev

终端显示错误，如下：

错误提示：无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。
如果你希望使用带大括号的语法，即SCSS
那么，你只要把lang=”sass”改成lang=”scss”就行了。

引用sass/scss 文件

举个例子

@import  "./common/scss/mixin";

千万别忘了分号
否则会报错类似的错误