一.安装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. [Learn AF3]第五章 App Framework 3组件之Drawer——Side Menu

    Drawer——Side menu 组件名称:Drawer     说明:af3中的side menu和af2中有很大变化,af3中的side menu实际上是通过插件$.afui.drawer来实现 ...

  2. protected: C++ access control works on per-class basis, not on per-object basis

    一个很简单的问题: //为什么BASE::foo()中可以直接通过p访问val? 看本记录标题,这个问题困扰了很长一段时间,终于解决class BASE {      private:        ...

  3. datatable删除一行方法

    t.row($(e).parents('tr')[0]).remove().draw(false); t为定义的datatable对象,row里面传入当前行的DOM元素.

  4. MVC學習網站

    http://www.cnblogs.com/haogj/archive/2011/11/23/2246032.html

  5. nginx: [emerg] getpwnam(“www”) failed错误

    linux 64系统中安装nginx时如果出现错误:nginx: [emerg] getpwnam(“www”) failed in ........解决方法1:      在nginx.conf中 ...

  6. 爬豆瓣影评,记下解决maximum recursion depth exceeded in cmp

    #主要是爬取后给别人做自然语言分析,没其他意思. #coding=utf8 import requests,re from lxml import etree import sys reload(sy ...

  7. Connect to a ROS Network---2

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

  8. SQL Compare数据库比较工具 完全破解+使用教程

    来源http://www.cnblogs.com/duci/articles/4482665.html 一.使用教程 SQL Compare是编程人员常用的比较两个数据库之间差异的工具.可以用来比较数 ...

  9. UML类图关系(转,添加了实例)

    UML类图关系(泛化 .继承.实现.依赖.关联.聚合.组合) 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Associati ...

  10. java.net.NoRouteToHostException:无法指定被请求的地址

    最近在做一个新项目的poc压测的时候发现了如下问题: TPS一直突破不了5000,按照计算理论上应该可以达到8000 tps/s左右的,查看数据库端口情况,吓一跳... netstat -ant | ...