一.安装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. 两台linux服务器之间实现挂载

    https://blog.csdn.net/lpp_dd/article/details/78743862 两台linux服务器之间实现挂载: 服务端: 1.首先需要在主机上设置允许挂载的目录 (1) ...

  2. LoadRunner 使用介绍

    功能介绍 安装流程 LoadRunner是一款测试系统行为和性能的负债测试工具,通过模拟上千万用户实施并发复杂以实时性能监控的方式来确认和查找问题.它是一款付费商业软件,开发商为HP,个人开发者可以使 ...

  3. JUnit 3一个例子就懂

    JUnit is a simple framework to write repeatable tests. It is an instance of the xUnit architecture f ...

  4. 近阶段学习总结(EasyUI的使用)

    最近阶段正在学习Js框架的使用,目前正在详细了解JQuery EasyUI 的使用. jQuery EasyUI 框架帮助我们轻松建立站点: easyui是一个基于jquery的集成了各种用户界面的插 ...

  5. Rx与Async Task的简单对比

    有关Reactive Extensions的介绍可见https://rx.codeplex.com/,总的来说,你可以当它是又一个异步编程的框架,它以观察者模式实现了对数据流的的“订阅”.一个列表,一 ...

  6. SpringBoot------新建一个项目

    1.新建一个Maven Project 2.选择项目路劲 3.选择Web App 4.添加项目名称 5.右击“Properties”->“Java Build Path”->“Source ...

  7. 给一个由n-1个整数组成的未排序的序列,其元素都是1~n中的不同的整数。如何在线性时间复杂度内寻找序列中缺失的整数

    思路分析:尼玛这不就是等差数列么.首先将该n-1个整数相加,得到sum,然后用(1+n)n/2减去sum,得到的差即为缺失的整数.因为1~n一共n个数,n个数的和为(1+n)n/2,而未排序数列的和为 ...

  8. hibernate4.3 无法获取数据库最新值

    在用ssh框架的时候遇到一个问题(hibernate版本号4.3) 问题描写叙述:web端和应用程序都能够读写数据库.当应用程序改动数据库后.hibernate无法读取最新值,读出来的一直都是旧数据. ...

  9. JS有趣的单线程

    一.JS的执行特点    源于单线程的特性, JS在一段时间内只能执行一部分代码, 那么, 当有多块代码需要执行时, 就需要排队等候了.   二.单线程与异步事件 (1) 什么是异步事件?     异 ...

  10. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...