一.安装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. Xcode - 升级后模拟器无法响应电脑键盘

    链接 Q: I used to be able to type with my real mac keyboard after launching the iPhone Simulator. Typi ...

  2. 7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库

    7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库 三种方法 rpm工具----->类型windows下的exe程序 ...

  3. UNIX环境编程学习笔记(1):——出错处理errno

    lienhua342014 年 8 月 24 日 1. errno变量 文件 <errno.h> 中定义了符号 errno 以及可以赋予它的各种常量,这些常量都是以字符 E 开头.例如,若 ...

  4. JSON.stringify报cyclic object value错误

    这是一个典型的循环引用的错误,一个对象里引用自己就会立刻得到这个错误: obj = { x:555, y: "hi" }; obj.myself = obj; try{ json ...

  5. less语法(二)混合属性

    摘要: 前面介绍了less的变量和extend语法,今天在研究下混合属性(Mixin).混合可以说是less的另一个特征,你可以将通用属性定义在一块,然后使用时直接调用此混合属性. 混合: 在 LES ...

  6. aspose导出excel文件

    using Aspose.Cells; using System; using System.Collections.Generic; using System.Data; using System. ...

  7. Xcode工程添加第三方文件的详细分析 Create folder references for any added folders(转)

    在开发iOS项目的时候需要导入第三方的库文件,但是通过Xcode导入第三方源文件的时候会提示一些信息,不知所以然. 现在看到的文档都是针对Xcode3的,针对Xcode4的说明很少,现在分享出来. 官 ...

  8. Dubbo -- 系统学习 笔记 -- 示例 -- 多协议

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 多协议 可以自行扩展协议,参见:协议扩展 (1) 不同服务不同协议 比如:不同服务 ...

  9. python与VScode

    用VScode写python是非常方便的.vscode是一个功能非常强大的编辑器,下面介绍大致的使用方法: 下载安装python,配置环境变量. 下载安装VScode(vscode会自动连接pytho ...

  10. Windows最全快捷键

    单独按Windows:显示或隐藏“开始”功能表 Windows+BREAK:显示“系统属性” 对话框 Windows+D:显示桌面 Windows+M:最小化所有窗口 Windows+Shift+M: ...