一.安装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. spark 非常好的学习内容

    http://homepage.cs.latrobe.edu.au/zhe/ZhenHeSparkRDDAPIExamples.html

  2. thinkphp3.2 session时间周期无效

    Thinkphp3.2 session周期时间默认是无效的 方法一: 这种方法使用session非常麻烦 1.配置'SESSION_AUTO_START' =>false,2.控制器方法sess ...

  3. SharePoint 使用ECMAscript对象模型来读取帖子列表

    本随笔讲述如何用JavaScript来读取SharePoint 2013 中blog相关的帖子列表. ASCX File Content: <div id="divGetItemsFr ...

  4. Django系列之form渲染表单后css样式丢失

    最通用的form写法 我们经常看各大网站上写这样的form写法 class SYSAdminPhysicalForm(forms.ModelForm): ''' this form for idc's ...

  5. PHP的五大阶段

    PHP程序员必须懂前端,后端,数据库,服务器.具体的学习顺序是: 第一阶段:扫盲.了解什么是B/S模式,原理上知道从浏览器输入一个url是如何获取到信息的流程.熟悉html,能快速地用div+css写 ...

  6. Centos7.3.1611安装mysql5.7.18 rpm教程 并设置datadir

    一.卸载MariaDB CentOS7默认安装MariaDB而不是MySQL,而且yum服务器上也移除了mysql相关的软件包.因为MariaDB和MySQL可能会冲突,故先卸载MariaDB. 1. ...

  7. 系统安装SQL Sever2000后1433端口未开放,如何打开1433端口的解决方法

    这篇文章主要针对Win2003系统安装SQL Sever2000后1433端口未开放,如何打开1433端口的解决方法. 用了几年的Windows2003和SQL Server2000了,不过这个问题倒 ...

  8. 1、一、Introduction(入门): 0、Introduction to Android(引进到Android)

    一.Introduction(入门) 0.Introduction to Android(引进到Android) Android provides a rich application framewo ...

  9. mysql类型对应Java的类型

    整型 JDBCtinyint         java.lang.Integersmallintmediumint       java.lang.Longint          bigint    ...

  10. 2018.8.23几日重新编译OSG+OE+Qt遇到的问题

    Qt安装多个版本的时候,注意屏蔽掉不使用的Qt,例如OE中的CMakeLists.txt中的# FIND_PACKAGE(Qt4) 使用以前编译好的libcurl.dll现在出现"无法定位序 ...