sass怎么在vue中使用

sass怎么在vue中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

贡觉ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

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

全局安装 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标签如下

然后运行项目

npm run dev

终端显示错误,如下:

 ERROR Failed to compile with 1 errors

 error in ./src/components/Hello.vue

Module build failed: 
h2, h3 {
    ^
   Invalid CSS after "h2, h3 {": 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 文件

举个例子

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

千万别忘了分号

否则会报错类似的错误

Module build 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

看完上述内容,你们掌握sass怎么在vue中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页题目:sass怎么在vue中使用
链接URL:http://hbruida.cn/article/johigp.html