一.安装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. 8.1 shell介绍 8.2 命令历史 8.3 命令补全和别名 8.4 通配符 8.5 输入输出重定向 

    8.1 shell介绍 8.2 命令历史 8.3 命令补全和别名 8.4 通配符 8.5 输入输出重定向 什么是shell? shell是一个命令解释器,提供用户和及其之间的交互 致辞特定语法,比如逻 ...

  2. 带你玩转Eclipse项目转成AndroidStudio项目

    随着Android对Eclipse开发工具的淘汰,越来越多的公司使用AndroidStudio进行相应的Android开发工作.如此,原来用Eclipse开发的项目,怎么导入到AndroidStudi ...

  3. HDU 5414 CRB and String (2015年多校比赛第10场)

    1.题目描写叙述:点击打开链接 2.解题思路:本题要求推断字符串s是否能通过加入若干个字符得到字符串t. 首先,能够知道,s必须是t的一个子串(注意:不是连续子串). 第二.因为插入的新字符和它前面的 ...

  4. vue如何加入百度联盟广告

    在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js 直接复制粘贴到自己网页中便可显示对应广告. 在vue中由于都是vue组件,不支持直接在组件中加入这样一段一段的js代码, ...

  5. level 6 - unit3 -- 非限制性定语从句

    非限制性定语从句 例子1 he has a son who is a fireman who 引导一个定语从句. who 是修饰前面的son. 翻译的意思:他有一个消防员的儿子 he has a so ...

  6. MyBatis踩坑记录

    在线文档: 动态SQL  http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html 1. Error setting null for paramete ...

  7. R语言概述

    R是一个有着统计分析功能及强大作图功能的软件系统,是由Ross Ihaka和Robert Gentleman共同创立.它是属于GNU系统的一个自由.免费.源码开放的软件,同一时候也是一个用于统计计算和 ...

  8. TCP拥塞控制算法纵横谈-Illinois和YeAH

    周五晚上.终于下了雨.所以也终于能够乱七八糟多写点松散的东西了... 方法论问题. 这个题目太大以至于内容和题目的关联看起来有失偏颇.只是也无所谓,既然被人以为"没有方法论"而歧视 ...

  9. 【ArcGIS】ArcGIS Android SDK

    1.错误提示 11-06 18:12:17.553: A/libc(11929): Fatal signal 11 (SIGSEGV), code 1, fault addr 0x0 in tid 1 ...

  10. mysql和连接相关的timeout

    MySQL和连接相关的timeout 今天同事问为什么查询mysql库时, 在数据量比较大时,会话总断.刚开始以为是mysql的和连接有关timeout的问题,结果是网络的不稳定的原因. 下面总结下和 ...