引入相关的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. async-validator 源码学习笔记(六):validate 方法

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...

  2. IDEA使用Docker插件构建镜像

    IDEA使用Docker插件构建镜像 记一次坑  第一次插件docker-maven-plugin的 配置文件中没写远程主机的地址 <dockerHost>http://192.168.1 ...

  3. 解释WEB 模块?

    Spring的WEB模块是构建在application context 模块基础之上,提供一个适合web应用的上下文.这个模块也包括支持多种面向web的任务,如透明地处理多个文件上传请求和程序级请求参 ...

  4. 为什么线程通信的方法 wait(), notify()和 notifyAll()被定 义在 Object 类里?

    Java 的每个对象中都有一个锁(monitor,也可以成为监视器) 并且 wait(),notify() 等方法用于等待对象的锁或者通知其他线程对象的监视器可用.在 Java 的线程中 并没有可供任 ...

  5. simulink中scope图像显示添加图例

    1. 在scope中添加图例 (1)首先打开配置属性(configuration properties),在display下面的show legend前面打钩 这样就允许图例显示出来 (2)对scop ...

  6. 小程序图片轮播特效swiper(纯手打)

    前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...

  7. C#内置委托类型Func和Action对比及用法

    C#的内置委托类型 Func Action 返回值 有(只有一个Tresult) 无 重载 17个(0参-16参) 17个(0参-16参) 泛型 支持 支持 系统内置 是 是 是否需要声明 否 否 c ...

  8. python-产生每位数字相同的n位数

    读入2个正整数A和B,1<=A<=9, 1<=B<=10,产生数字AA...A,一共B个A 输入格式: 在一行中输入A和B. 输出格式: 在一行中输出整数AA...A,一共B个 ...

  9. css3 calc浏览器中显示Invalid propety value

    在写前端页面样式中使用calc 显示Invalid property value 后来查了文档之后才发现是自己的格式不对 我的写法: .clac { width:calc(100%-112px); } ...

  10. 前后端分离mockjs以及webpack-dev-server代理

    一: 在webpack中使用mockjs  mockjs 也就是模拟数据(mock.js模拟的数据可以不跨域) 安装mock新建mock.js var Mock = require('mockjs') ...