脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue使用sass

详解如何在vue中使用sass

 更新时间：2017年06月21日 14:23:28   作者：一步一步往上爬  
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

创建一个基于 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标签如下

<style lang="sass">

然后运行项目

npm run dev

终端显示错误，如下：

 ERROR 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 文件

举个例子

@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

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

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

您可能感兴趣的文章:

相关文章

  • Vue Render函数创建DOM节点代码实例

    Vue Render函数创建DOM节点代码实例

    这篇文章主要介绍了Vue Render函数创建DOM节点代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue实现一个获取按键展示快捷键效果的Input组件

    vue实现一个获取按键展示快捷键效果的Input组件

    这篇文章主要介绍了vue如何实现一个获取按键展示快捷键效果的Input组件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2021-01-01
  • Nuxt.js踩坑总结分享

    Nuxt.js踩坑总结分享

    本篇文章主要介绍了Nuxt.js踩坑总结分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue如何封装选择文件组件和选择文件api

    vue如何封装选择文件组件和选择文件api

    这篇文章主要介绍了vue如何封装选择文件组件和选择文件api问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

    vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

    这篇文章主要给大家介绍了关于vue3+vite兼容低版本的白屏问题的相关资料,还给大家介绍了vue打包项目以后白屏和图片加载不出来问题的解决方法,需要的朋友可以参考下
    2022-12-12
  • Vue.js每天必学之构造器与生命周期

    Vue.js每天必学之构造器与生命周期

    Vue.js每天必学之构造器与生命周期，告诉大家什么是Vue.js构造器与生命周期，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 使用jenkins一键打包发布vue项目的实现

    使用jenkins一键打包发布vue项目的实现

    这篇文章主要介绍了使用jenkins一键打包发布vue项目的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 在Vue3中使用Vue Tour实现页面导览

    在Vue3中使用Vue Tour实现页面导览

    Vue Tour 是一个方便的 Vue.js 插件,它可以帮助我们在网站或应用中实现简单而灵活的页面导览功能,本文我们将介绍如何在 Vue 3 中使用 Vue Tour,并通过示例代码演示其基本用法,需要的朋友可以参考下
    2024-04-04
  • 详解vue-cli与webpack结合如何处理静态资源

    详解vue-cli与webpack结合如何处理静态资源

    本篇文章主要介绍了详解vue-cli与webpack结合如何处理静态资源，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue中如何处理token过期问题

    Vue中如何处理token过期问题

    这篇文章主要介绍了Vue中如何处理token过期问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10

最新评论