详解如何在vue中使用sass

前端之家收集整理的这篇文章主要介绍了详解如何在vue中使用sass前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

全局安装 vue-cli

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

安装依赖

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

修改style标签

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

然后修改 style标签如下

然后运行项目

终端显示错误,如下:

Failed to compile with 1 errors

error in ./src/components/Hello.vue

Module build Failed:
h1,h2 {
^
Invalid CSS after "h1,h2 {": expected "}",was "{"
in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36,column 9)

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

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

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

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

引用sass/scss 文件

举个例子

千万别忘了分号

否则会报错类似的错误

Failed: #app { ^ Media query expression must begin with '(' in /Users/fangyongle/elema/src/App.vue (line 35,column 1) @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256

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

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

猜你在找的Vue相关文章