引入相关的node包

npm install --save style-loader sass-loader node-sass file-loader

安装好之后,为了可以在.vue和.scss中使用,需要在vue.config.js中配置对应的解析器

module.exports = {
entry: ['./src/entry.js'],
output: {
path: __dirname,
filename: 'build/main.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}, {
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.(png|jpg|jpeg|gif|bmp)$/,
loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]']
}
]
}
};```

vue 配置scss流程的更多相关文章

  1. Vue项目搭建流程 以及 目录结构构建

    Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...

  2. CentOS安装gitlab,gerrit,jenkins并配置ci流程

    CentOS安装gitlab,gerrit,jenkins并配置ci流程 By Wenbin juandx@163.com 2016/4/9 这是我参考了网上很多的文档,配置了这三个软件在一个机器上, ...

  3. atitit.ajax bp dwr 3.的注解方式配置使用流程总结 VO9o.....

    atitit.ajax bp dwr 3.的注解方式配置使用流程总结 VO9o..... 1. 安装配置 1 1.1. 下载  dwr.jar 1M 1 1.2. 配置注解方式..web.xml 1 ...

  4. atitit.ajax bp dwr 3.的注解方式配置使用流程总结.....

    atitit.ajax bp dwr 3.的注解方式配置使用流程总结..... 1. 下载  dwr.jar 1M 1 2. 配置注解方式..web.xml 1 3. Class 配置 2 4. 测试 ...

  5. vue配置手机通过IP访问电脑开发环境

    vue配置手机通过IP访问电脑开发环境config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwrit ...

  6. vue配置手机通过IP访问,Win10让局域网内其他电脑通过IP访问网站的方法

    vue配置手机通过IP访问config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwritten by ...

  7. vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  8. Vue使用SCSS进行模块化开发

    原文地址:http://www.cnblogs.com/JimmyBright/p/7761531.html 个人认为scss最大的好处就是能将css属性设置为变量,这样让css一键更换主题成为可能. ...

  9. Nginx:解析HTTP配置的流程

    参考资料:深入理解Nginx(陶辉) 书中有详细的讲解,这里只用本人的理解梳理一下该流程. 一点提议:对于像我这样的新手,面对暂时看不懂章节,建议先往下看一下(可能就会有新的理解或灵感),而不要死磕在 ...

随机推荐

  1. HMS Core机器学习服务图像超分能力,基于深度学习提升新闻阅读体验

    在移动端阅读资讯时,人们对高分辨率.高质量的图像要求越来越高.但受限于网络流量.存储.图片源等诸多因素,用户无法便捷获得高质量图片.移动端显示设备的高分辨率图片获得问题亟待解决.不久前,HMS Cor ...

  2. linux更新源管理

    1.备份源 主要防止在更新了新的源之后出现错误情况,备份一下现有的源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.old 2.编辑sourc ...

  3. Spring Data Jpa 更新操作

    第一步,通过Repository对象把实体根据ID查询出来 第二部,往查出来的实体对象进行set各个字段 第三步,通过Repository接口的save方法进行保存 保存和更新方式(已知两种) 第一种 ...

  4. 线程的 sleep()方法和 yield()方法有什么区别?

    ① sleep()方法给其他线程运行机会时不考虑线程的优先级,因此会给低优先级的线程以运行的机会:yield()方法只会给相同优先级或更高优先级的线程以运行的机会: ② 线程执行 sleep()方法后 ...

  5. synchronized 和 ReentrantLock 的区别?

    synchronized 是和 if.else.for.while 一样的关键字,ReentrantLock 是类, 这是二者的本质区别.既然 ReentrantLock 是类,那么它就提供了比 sy ...

  6. php安装扩展的两种方法

    方法一:使用yum命令安装 1.yum install libevent-devel 2.pecl install channel://pecl.php.net/libevent-0.1.0 3.ec ...

  7. lombok的使用。

    今天学习spring event,无意中看到lombok插件,以前也见同事用过,特此看了下用法.觉得还挺好用,记录下. 网上找到的一个比较术语化的解释:lombok是一个基于LGPL的开源J2EE综合 ...

  8. 学习saltstack (四)

    一.salt常用命令 salt 该命令执行salt的执行模块,通常在master端运行,也是我们最常用到的命令 salt [options] '<target>' <function ...

  9. Java入门之基础程序设计

    1.Java语言特点了解 1. java语言:   有些语言提供了可移植性.垃圾收集等机制,但是没有提供一个大型的库.如果想要有酷炫的绘图功能.网络连接功能或者数据库存取功能,就必须动手编写代码.Ja ...

  10. IOS动态调试汇总-傻瓜版教程

    参考博客: https://juejin.cn/post/6872764160640450574#heading-4 (断点后续指令) https://www.jianshu.com/p/67f08a ...