1.用npm/cnpm/yarn安装sass的依赖包

npm install --save-dev sass-loader

npm install --save-dev node-sass

或者：

yarn add sass-loader node-sass

2.在build目类下找到webpack.base.conf.js文件，在module的rules中插入以下代码：

module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
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: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},

转载于:https://www.cnblogs.com/wjs0509/p/11082735.html

如何在vue项目中使用sass（scss）相关推荐

  1. 如何在vue项目中系统的使用iconfont字体图标

    如何在vue项目中系统的使用iconfont字体图标 前言 iconfont的特色 官网注册 在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...

  2. 如何在vue项目中修改less变量，多主题项目解决方案

    如何在vue项目中修改less变量,多主题项目解决方案 参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...

  3. 如何在vue项目中使用Highmaps(vue+Highmaps)

    如何在vue项目中使用Highmaps 功能需求 思路 分析 实现 第一步:引入 第二步:介绍一下这个world是个啥. 第三步:调用 注意点(十分重要) 写在最后 功能需求 近日我接到了这么一个需求 ...

  4. 如何在vue项目中设置首页

    如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...

  5. 如何在vue项目中使用lodop打印插件

    如何在vue项目中使用lodop打印插件 - 简书 先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...

  6. vux 显示 html,如何在vue项目中使用vux

    编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.​安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...

  7. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  8. 如何在Vue项目中引入ArcGIS JavaScript API​ 创建三维可视化地图（含vue项目创建教程）

    新手上路之在Vue项目中引入ArcGIS API​ 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...

  9. 如何在Vue项目中应用TypeScript？

    一.前言 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, # npm 下载 npm i vue-property-decorator -s # ...

最新文章

  1. 课后习题代码持续更新。。。。。。。。。。。。。
  2. 一文带你全面了解电商在线支付
  3. DCMTK：可加载的DICOM数据字典
  4. Java中可怕的双重检查锁定成语
  5. day03 基本数据类型
  6. Python 程序 运行过程
  7. Maven 项目在 Eclipse 的创建配置
  8. @synthesis 使用的时候注意的地方
  9. centos设置服务开机启动失败问题
  10. 中科同向 备份软件 引领科技 存储未来
  11. 获取简单的输入和渲染窗口(Hello Window)
  12. 刷面经笔记2019.01.30
  13. 《华为工作法》学习笔记
  14. MT4跟单软件的API跟单模式有多少种？
  15. Qt绘制出思岚雷达扫描到的轮廓
  16. 定义一个圆类(Circle）
  17. python入门（三）列表、元组、range()、字典
  18. 淘宝天猫整店店铺商品API，店铺商品分类接口代码教程
  19. O2O模式和B2C模式的区别是什么？
  20. 【报告分享】2022年移动市场报告-App Annie(附下载)

热门文章

  1. 计算机视觉论文-2021-06-28
  2. AAAI 2021 | 用于旋转目标检测的动态锚框学习策略
  3. DEKR 解构式人体关键点回归（二）：标签分配(Label Assignment)
  4. Word2Vec教程-Skip-Gram模型
  5. 机器学习（五）PCA数据降维
  6. mysql读写分离 同步_MySQL数据库的同步配置+MySql读写分离
  7. Linux常用命令大全（非常全）
  8. 网络规划设计师考试总结
  9. Android开发入门二之AndroidManfest.xml文件详细说明 .
  10. MySQL笔记（五）索引 index