一.安装sass依赖包

$ npm install sass-loader --save-dev
//sass-loader依赖于node-sass
$ npm install node-sass --save-dev

二.修改 style标签添加lang属性

<style lang="scss" type="text/css">
//你的sass语言
$primary-color: #333;
h1 {
color: $primary-color; //编译后就成了 color:#333;类似于js的变量!
}
</style>

  

三.npm编译

$  npm run dev

四.如果失败

则打开build文件夹下面的webpack.base.config.js添加

{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}

  

vue使用sass的更多相关文章

  1. 解决 vue 的缩进问题 及 vue 的 sass 调用 mixin 函数

    1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js  --  rules ) A. 不检测 缩进 ...

  2. vue 安装sass扩展

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 1 2.在当前目录下,安装依赖 $ cd myvue $ npm install 1 2 3.安装sa ...

  3. vue -- 使用sass并引入公共sass文件

    sass可以提高我们的开发效率,怎么在vue的项目中使用sass并且可以设置一些公共的文件呢? 使用sass 1.安装sass的依赖包 npm install --save-dev sass-load ...

  4. 在vue配置sass

    先npm两个插件 npm install sass-loader --save-dev npm install node-sass --save-dev 然后在webpack当中配置 { test: ...

  5. vue中sass的配置安装流程

    1.安装node-sass,因为scss是基于此库的 cnpm install --save-dev node-sass 2.安装sass-loader cnpm install --save-dev ...

  6. vue - 添加sass(less)处理

    1. 添加less.sass处理 1.1如果是sass,首先在当前目录安装处理插件(sass): npm i -D node-sass sass-loader 1.2如果是less,首先在当前目录安装 ...

  7. vue使用sass报Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

    项目中使用sass报错,之前一直使用同样的安装方式 cnpm install sass-loader node-sass -D,正常使用没问题,没想到这次同样的方式却报错了,网上查的原因是sass-l ...

  8. vue 使用 sass 或者 less ( vue-cli 3 )

    项目使用 vue-cli 3 在项目中使用 sass npm install sass-loader --save -D cnpm install sass-loader --save -D      ...

  9. vue 及sass安装

    推荐:https://www.cnblogs.com/Mr--Li/p/7921150.html

随机推荐

  1. TensorFlow:tf.reduce_mean(input_tensor, axis=None, keep_dims=False, name=None, reduction_indices=None)

    转载:https://www.cnblogs.com/yuzhuwei/p/6986171.html 1.概述 在深度学习里研究的物体的关系,都是比较复杂的.比如一个图片32X32大小的,它的像素信息 ...

  2. 关于HTTP Message

    HTTP Message包括JS, HTML等Resource.这些都是相对来说有代码可以写的东西,但是原理的东西是没有代码的.coding只是很少的一部分工作内容. Browser的流程.比如con ...

  3. Launchpad图标大小怎么调整?

    一.首先运行“终端”程序,执行以下命令: 1.调整每一列显示图标数量,7 表示每一列显示7个 defaults write com.apple.dock springboard-rows -int 7 ...

  4. 怎么安装ABBYY FineReader

    ABBYY FineReader是市场领先的文字识别(OCR)软件,可快速方便地将扫描纸质文档.PDF文件和数码相机的图像转换成可编辑.可搜索信息,ABBYY FineReader 12是目前最新版本 ...

  5. DPSR随手笔记

    降质模型 MAP:

  6. A标签添加JS事件,不跳转不刷新办法

    <a href="javascript:;" id="submit-btn" class="submit-btn" title=&qu ...

  7. phpcms列表页调用 点击量

    很多朋友经常问Phpcms v9的首页.列表页.内容页点击量如何调用.现在就给大家分享phpcms V9如何分别在首页.列表页.内容页调用点击量代码: 1. Phpcms v9首页调用点击量{pc:c ...

  8. iOS中js与objective-c的交互(转)

    因为在iOS中没有WebKit.Framework这个库的,所以也就没有 windowScriptObject对象方法了.要是有这个的方法的话 就方便多了,(ps:MacOS中有貌似) 现在我们利用其 ...

  9. Js页面刷新前提示-jquery页面刷新事件

    //原理很简单,就是在body的onbeforeunload事件绑定函数,代码如下: document.body.onbeforeunload = function (event) { var c = ...

  10. ajax访问WebService跨域问题

    1.先看一个网站介绍,了解跨域问题    HTTP访问控制(CORS) 2.像谷歌.火狐浏览器对一些非简单请求会触发预检请求,首先使用 OPTIONS   方法发起一个预检请求到服务器,然而IE浏览器 ...