前面已使用vue-cli新建了一个vue项目,参考  使用命令行创建一个vue项目的全部命令及结果

首先看下新建项目的页面和代码,有部分修改,可忽视,如下图:

   

然后我们在页面添加sass的代码:

修改完保存后立即就报错了:

    

在使用scss之前,我们首先需要安装相关的插件: 这里参考的是:链接( vue 项目 使用sass )

$ npm install node-sass --save-dev

> node-sass@4.9.0 install F:\05 poverty alleviation project\poverty\node_modules\node-sass
> node scripts/install.js Cached binary found at D:\nodejs\node_cache\node-sass\4.9.0\win32-x64-57_binding.node > node-sass@4.9.0 postinstall F:\05 poverty alleviation project\poverty\node_modules\node-sass
> node scripts/build.js Binary found at F:\05 poverty alleviation project\poverty\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + node-sass@4.9.0
added 73 packages from 83 contributors and audited 33411 packages in 40.38s
found 16 vulnerabilities (1 low, 10 moderate, 4 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details $ npm install sass-loader --save-dev
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + sass-loader@7.0.3
added 9 packages from 17 contributors and audited 33431 packages in 15.084s
found 16 vulnerabilities (1 low, 10 moderate, 4 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details

安装完重新启动项目,如下图,我们看到页面是可以正常显示了,用scss写的样式也起了作用哦 :)

这里不同于参考链接的是,不需要配置参考文说到的webpack.base.config.js,可是也能正常使用了。

而安装上面的插件也是一次性就安装成功的,没有出现别的问题。

谁知道原因的可以留言哦,新手不是很懂这些配置文件。

在vue-cli建的vue项目中使用sass的更多相关文章

  1. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  2. 在使用vue+webpack模版创建的项目中使用font-awesome

    前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...

  3. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  4. Vue Cli 3:vue.config.js配置文件

    Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...

  5. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  6. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  7. Vue Cli 3:创建项目

    一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...

  8. vue打包发布在spingboot项目中 vue-router路由的处理

    (原) 以下例子springboot后端地址为:localhost:7080/pingandai vue前端地址为:locahost:8080/pingandai/ 1.如果路由模式设置的是histo ...

  9. 《论vue在前后端分离项目中的实践之年终总结》

    我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...

  10. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

随机推荐

  1. kafka系列 -- 多线程消费者实现

    看了一下kafka,然后写了消费Kafka数据的代码.感觉自己功力还是不够. 不能随心所欲地操作数据,数据结构没学好,spark的RDD操作没学好. 不能很好地组织代码结构,设计模式没学好,面向对象思 ...

  2. 【转】MapReduce:详解Shuffle过程

    ——转自:{http://langyu.iteye.com/blog/992916} Shuffle过程是MapReduce的核心,也被称为奇迹发生的地方.要想理解MapReduce, Shuffle ...

  3. POJ 3686 The Windy's (最小费用流或最佳完全匹配)

    题意:有n个订单m个车间,每个车间均可以单独完成任何一个订单.每个车间完成不同订单的时间是不同的.不会出现两个车间完成同一个订单的情况.给出每个订单在某个车间完成所用的时间.问订单完成的平均时间是多少 ...

  4. java 路径、className.class.getResourceAsStream()、ClassLoader.getSystemResourceAsStream() 、FileInputStream

    className.class.getResourceAsStream 用法: 第一: 要加载的文件和.class文件在同一目录下,例如:com.x.y 下有类Test.class ,同时有资源文件c ...

  5. Spring组件扫描 <context:component-scan/>

    目录(?)[-] 总结 使用方式 扫描controller下所以类 扫描符合条件Controller的类推荐 我们在SpringMVC开发项目中,有的用注解和XML配置Bean,这两种都各有自己的优势 ...

  6. C# Timer类

    C# 有三种不同的Timer类 1.Threading.Timer 2.Timer.Timer 3.Forms.Timer using System; using System.Collections ...

  7. poj2462

    看八戒在做这个题,我也做了做.. 坑很多,还是要注意细节.不得不吐槽,难道又到了计算几何只能套模板否则就一串WA的情况了么! 要不是八戒做出来了,这题我估计我也就扔到这里了..哥不服啊~所以得做出来! ...

  8. ios开发 ad hoc怎么用

    简单的说就是这样 ad hoc 方式是苹果用来给未上线的app做测试用的,首先你要在苹果开发平台上申请一个ad hoc的证书,再在profile中生成一个ad hoc 的profile文件(只需要在生 ...

  9. FP-Growth in Spark MLLib

    并行FP-Growth算法思路 上图的单线程形成的FP-Tree. 分布式算法事实上是对FP-Tree进行分割,分而治之 首先,假设我们只关心...|c这个conditional transactio ...

  10. Nodejs-- web服务器

    第一篇关于nodejs的东西,代码在此作为备份. 该代码目前未完成,是一个阻塞式的代码. 1.index.js ar server=require('./server'); var route=req ...