在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v

  

  表示sass在电脑中已有,否者可以参考我这篇博客安装Sass遇到的坑

一、先安装sass

  cmd打开命令行,到项目的位置

npm install node-sass --save-dev  //安装node-sass
npm install sass-loader --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的!

  连续安装三个麻烦的话,来个快捷的方式

npm install sass-loader node-sass vue-style-loader --D

二、配置sass

这个时候你打开build文件夹下面的webpack.base.config.js,如下修改

module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: ,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //上面的不修改,这是sass的配置
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},

三、sass应用用法

  在 .vue 的编程页面上,style上加 lang='scss'

  

  在引入sass文件是sass文件后缀为 .scss 如下

  

  


  

在vue2.x中安装sass并配置的更多相关文章

  1. vue2.0中使用sass

    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...

  2. VMware中安装CentOS7网络配置静态IP地址,常用配置和工具安装

    VMware中安装CentOS7网络配置静态IP地址,常用配置和工具安装在阿里云开源镜像地址下载镜像Index of /centos/7.2.1511/isos/x86_64/http://mirro ...

  3. 在Fedora中安装PostgreSQL并配置密码和开启远程登陆

    在Fedora中安装PostgreSQL并配置密码 首先先放出官方的文档教程 :https://fedoraproject.org/wiki/PostgreSQL 我写的内容其实也八九不离十,站在一个 ...

  4. 在vue中使用sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...

  5. 在vue中添加sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...

  6. Eclipse中安装Jdk和配置Python

    要借助Eclipse辅助工作,之前安装配置都是同事帮忙弄的,今天有空来整理一下安装配置步骤 一.安装JDK1.下载JDK,安装JDK,安装完毕,配置JDK环境变量  1)我的电脑右键-属性-高级-点击 ...

  7. 【Asp.net Core】在 Linux 子系统中安装 nginx 并配置反向代理

    上一篇鸟文中,老周已经介绍过在 Ubuntu 子系统中安装 dotnet-sdk 的方法,本文老周给大伙伴们说说安装 nginx 服务,并配置反向代理.同样,老周假设你从来没有用过 Linux,所以老 ...

  8. eclipse中安装maven,配置本地仓库和镜像

    1.安装maven,配置MAVEN_HOME 首先:下载免安装版解压配置MAVEN_HOME(和配置JAVA_HOME一样) 然后按照下面的配置,主要第3步,指定settings.xml文件的位置(在 ...

  9. 在sublime text3中安装sass编译scss文件

    一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...

随机推荐

  1. 除了ROS ,机器人自主定位导航还能怎么做?

    博客转载自:https://www.leiphone.com/news/201609/10QD7yp7JFV9H9Ni.html 雷锋网(公众号:雷锋网)按:本文作者科技剪刀手,思岚科技技术顾问. 随 ...

  2. C++ 结构体的构造函数和析构函数

    在C++中除了类中可以有构造函数和析构函数外,结构体中也可以包含构造函数和析构函数,这是因为结构体和类基本雷同,唯一区别是,类中成员变量默认为私有,而结构体中则为公有.注意,C++中的结构体是可以有析 ...

  3. Android之对话框Dialog

    首先是确认对话框 //确认对话框 private void showLog1() { AlertDialog.Builder dialog = new AlertDialog.Builder(this ...

  4. windows平台下用C#访问HBase

    Hadoop中的HBase有多种数据访问方式,ubuntu里可以用hbase shell查看操作hbase数据库,但windows平台下需要用thrift对它进行访问. 例如hadoop安装在/usr ...

  5. Entity Framework Code-First(18):Turn off DB Initializer

    Turn off DB Initializer in Code-First: You can also turn off the DB initializer of your application. ...

  6. JS 求解时间差

    function UTCTimeDemo($str){ var d, s = "当前 UTC 时间为: "; var c = ":"; d = new Date ...

  7. mac port选择使用的python的版本

    To list: port select --list python To show: port select --show python To select: sudo port select -- ...

  8. winform GDI基础(四)简单截屏

    Bitmap bitmap = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height); G ...

  9. Win10每次开机总是自动弹出MSN网址导航如何取消

    Win10每次开机总是自动弹出MSN网址导航如何取消 近来有用户在升级Win10系统后,每次开机总是会自动弹出MSN中文网的网址导航.如果不想要开机打开MSN网址导航,那么应该怎么设置来取消呢?对此, ...

  10. 洛谷P3709 大爷的字符串题(莫队)

    题目背景 在那遥远的西南有一所学校 /*被和谐部分*/ 然后去参加该省省选虐场 然后某蒟蒻不会做,所以也出了一个字符串题: 题目描述 给你一个字符串a,每次询问一段区间的贡献 贡献定义: 每次从这个区 ...