一.安装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. “A configuration with this name already exists” error in eclipse run configurations

    “A configuration with this name already exists” error in eclipse run configurations Is there a way t ...

  2. Gridview各种功能+AspNetPager+Ajax实现无刷新存储过程分页 (留着用)

    存储过程: GetProductsCount1: GetProductsByPage: ) * @PageSize) +' id from test)' exec sp_executesql @sql ...

  3. thinkphp并发 阻塞模式与非阻塞模式

    结构代码 public function index(){ $fp = fopen("lock.txt", "w+"); if(flock($fp,LOCK_E ...

  4. (转)Java程序员应该知道的10个调试技巧

    (转自 酷勤网 – 程序员的那点事!http://www.kuqin.com/) 试可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.但这里 ...

  5. 《HTTP权威指南》学习笔记——URL和资源

    URL与资源 URL是互联网资源的标准化名称 1.浏览互联网资源 URL是浏览器寻找信息时所需的资源位置 URI是一类更通用的资源标识符,URL是它的子集. URI的两个子集:URL和URN URL提 ...

  6. perforce变量配置与使用

    linux Perforce 使用 1.配置环境变量: 下载  perforce    放到/usr/bin/下 export P4PORT=192.168.4.88:1666 #P4所在的主机exp ...

  7. org.apache.http.client.methods.HttpGet 转到定义找不到源代码

    例如 org.apache.http.client.methods.HttpGet ,提示没有源码 到这里下载 http://hc.apache.org/downloads.cgi Source 4. ...

  8. 代码记录——phase16,block36(修正后)

    加入边缘判定,<2则加2. if (x_upleft<2) x_upleft=x_upleft+2; if (y_upleft<2) y_upleft=y_upleft+2; HRE ...

  9. 第五种方式,python使用组合来添加类方法和属性(二),以selenium的webdriver为例

    组合优点多,但经常比继承需要额外的代码. 上一篇是 介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的四种方式. 此篇介绍直接把被组合的类的属性直接加入到类里面,前面的四个例子很简单, ...

  10. Connect to a ROS Network---2

    原创博文:转载请标明出处(周学伟):http://www.cnblogs.com/zxouxuewei/tag/ 一.Introduction ROS网络由单个ROS主机和多个ROS节点组成. ROS ...