详解如何在vue中使用sass

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

全局安装 vue-cli

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

安装依赖

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

修改style标签

打开src目录下的components目录中的Hello.vue文件。

然后修改 style标签如下

然后运行项目

终端显示错误，如下：

错误提示：无效的css。因为sass语法不使用大括号和分号。

如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。

如果你希望使用带大括号的语法，即SCSS

那么，你只要把lang="sass"改成lang="scss"就行了。

引用sass/scss 文件

举个例子

千万别忘了分号

否则会报错类似的错误

好了，在vue项目中使用sass就这么简单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!