详解如何在vue中使用sass
创建一个基于webpack模板的新项目
全局安装vue-cli
$npminstall--globalvue-cli
创建一个基于webpack模板的新项目
$vueinitwebpackmy-project
安装依赖
$cdmy-project $npminstall
为了使用sass，我们需要安装sass的依赖包
npminstall--save-devsass-loader //sass-loader依赖于node-sass npminstall--save-devnode-sass
修改style标签
打开src目录下的components目录中的Hello.vue文件。
然后修改style标签如下
然后运行项目
npmrundev
终端显示错误，如下：
ERRORFailedtocompilewith1errors
errorin./src/components/Hello.vue
Modulebuildfailed:
h1,h2{
^
InvalidCSSafter"h1,h2{":expected"}",was"{"
in/Users/fangyongle/my-blogger/src/components/Hello.vue(line36,column9)
错误提示：无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。
如果你希望使用带大括号的语法，即SCSS
那么，你只要把lang="sass"改成lang="scss"就行了。
引用sass/scss文件
举个例子
@import"./common/scss/mixin";
千万别忘了分号
否则会报错类似的错误
Modulebuildfailed:
#app{
^
Mediaqueryexpressionmustbeginwith'('
in/Users/fangyongle/elema/src/App.vue(line35,column1)
@./~/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.vue4:14-24813:3-17:514:22-256
好了，在vue项目中使用sass就这么简单
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。