一.安装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. usermod命令/用户密码管理/mkpasswd命令

    3.4 usermod命令 3.5 用户密码管理 3.6 mkpasswd命令 usermod命令 设置用户uid: usermod  -u  111 username 设置用户gid usermod ...

  2. SQLSERVER 2008 技术内幕 T-SQL查询 笔记1: SQL 执行顺序

    与大多数语言一样,SQL语言也有一个执行顺序,只是在大多数编程语言中,代码是按照编写顺序来处理的,而在SQL中则不是,下图为SQL 执行顺序. () ) [ ALL | DISTINCT ] () [ ...

  3. SharePoint 2013 将HTML文件转换为母版页

    内容中包含 base64string 图片造成字符过多,拒绝显示

  4. 常用Dos(转)

    先介绍一下通配符的概念. 通配符*和? *表示一个字符串 ?只代表一个字符 注意通配符只能通配文件名或扩展名,不能全都表示.例如我们要查找以字母y开头的所有文件,可以输入以下命令:dir y*.*:如 ...

  5. 配置caffe过程中,生成解决方案出错。无法打开包括文件: “gpu/mxGPUArray.h”

    ------ 已启动生成: 项目: matcaffe, 配置: Release x64 ------12> MatlabPreBuild.cmd : Create output director ...

  6. 源码分析七(java.lang包之IllegalArgumentException类)

    一:IllegalArgumentException非法参数类,这个类继承父类RuntimeException public class IllegalArgumentException extend ...

  7. go语言之PLAN9汇编

    http://blog.studygolang.com/2013/05/asm_and_plan9_asm/ https://lrita.github.io/2017/12/12/golang-asm ...

  8. python--面向对象--14

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Pyth ...

  9. layui文件上传进度条(模拟)

    1.修改上传组件js(没测) https://blog.csdn.net/weixin_42457316/article/details/81017471 https://www.cnblogs.co ...

  10. mongodb 在 Ubuntu系统上的安装及卸载

    mongodb官网 The mongodb-org-server package provides an initialization script that starts mongod with t ...