分析如何在vue中使用sass

内容摘要
这篇文章主要为大家详细介绍了分析如何在vue中使用sass，具有一定的参考价值，可以用来参考一下。
文章正文

这篇文章主要为大家详细介绍了分析如何在vue中使用sass，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！

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

 

全局安装 vue-cli

 

代码如下：

1
2
<code>
$ npm install --global vue-cli</code>

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

代码如下：

1
2
<code>
$ vue init webpack my-project</code>

 

安装依赖

 

代码如下：

1
2
3
<code>
$ cd my-project
$ npm install</code>

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

代码如下：

1
2
3
4
<code>
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass</code>

 

修改style标签

 

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

然后修改 style标签如下

代码如下：

1
2
<code>
<style lang="sass"></code>

然后运行项目

代码如下：

1
2
<code>
npm run dev</code>

终端显示错误，如下：

代码如下：

1
2
3
4
5
6
7
8
9
10
11
<code>
 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)
</code>

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

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

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

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

 

引用sass/scss 文件

 

举个例子

代码如下：

1
2
<code>
@import "./common/scss/mixin";</code>

千万别忘了分号

否则会报错类似的错误

代码如下：

1
2
3
4
5
6
7
<code>
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</code>

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

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

注：关于分析如何在vue中使用sass的内容就先介绍到这里，更多相关文章的可以留意
代码注释
上一篇PHP文件缓存内容保存格式的解决办法下一篇浅谈vue-lazyload实现的详细过程

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！