源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详解如何在vue中使用sass

  • 时间:2022-10-22 12:24 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解如何在vue中使用sass
创建一个基于 webpack 模板的新项目 [b]全局安装 vue-cli[/b]
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
[b]安装依赖[/b]
$ cd my-project
$ npm install
为了使用sass,我们需要安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
[b]修改style标签[/b] 打开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"就行了。 [b]引用sass/scss 文件[/b] 举个例子
@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就这么简单 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部