wepack+sass+vue 入门教程（三）
十一、安装sass文件转换为css需要的相关依赖包
npm install --save-dev sass-loader style-loader css-loader
loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件。比如index.scss转换成index.css
安装成功后，package.json文件变化如下：
接着，安装extract-text-webpack-plugin，让webpack可以输出css格式的文件
npm install --save-dev extract-text-webpack-plugin
安装成功后，提示需要node-sass做配合，所以下一步是安装node-sass
npm install --save-dev node-sass
安装node-sass会比较久，需要耐心等待
全部搞定后，package.json文件变化如下:
十二、将app/css/index.css文件改为sass编译输出
在origin文件夹下，新增css.js文件，用于指定读取origin/css/index.scss文件
css.js文件内容如下:
require('./css/index.scss');
origin/css/index.scss文件内容如下
@charset "utf-8";
$colorRed : red;
$fontSize : 14px;
.demo{color:$colorRed;font-size:$fontSize;}
更新webpack配置文件webpack.config.js
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var ExtractPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 配置入口
entry: {
'/js/index':__dirname +'/origin/origin.js',
'/css/index':__dirname +'/origin/css.js'
},
// 编译后的文件路径
output: {
path: __dirname +'/app', // 文件路径
filename: '[name].js' // 文件名称
},
module: {
// 编译规则
loaders: [
// 配置sass编译规则
{
test:/\.scss$/,
loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')
}
]
},
// 辅助的插件
plugins:[
new BrowserSyncPlugin({
host:'localhost', // 实时监听，webpack -w 可以实时更新硬盘中的文件js，css
port:8080,
file:'',
server:{
baseDir:'./app'
}
}),
new ExtractPlugin('[name].css')
]
}
然后，启动webpack -w
编译成功，再实时修改字体颜色为green
十三、加入vue
1.安装vue，vue选择安装版本1.0.0
npm install --save-dev vue@1.0.0
2.安装babel的相关依赖包，可以编译最新标准的javascript。比如es6，es7。
npm install --save-dev babel-core babel-loader babel-runtime babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0
3.更新webpack配置文件webpack.config.js
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var ExtractPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 配置入口
entry: {
'/js/index':__dirname +'/origin/origin.js',
'/css/index':__dirname +'/origin/css.js'
},
// 编译后的文件路径
output: {
path: __dirname +'/app', // 文件路径
filename: '[name].js' // 文件名称
},
module: {
// 编译规则
loaders: [
// 配置sass编译规则
{
test:/\.scss$/,
loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')
},
{
// 让webpack去验证文件是否是.js结尾将其转换
test: /\.js$/,
// 通过babel转换
loader: 'babel',
// 不用转换的node_modules文件夹
exclude: /node_modules/,
query: {
'presets': ['es2015', 'stage-0'],
'plugins': ['transform-runtime']
}
},
]
},
// 辅助的插件
plugins:[
new BrowserSyncPlugin({
host:'localhost', // 实时监听，webpack -w 可以实时更新硬盘中的文件js，css
port:8080,
file:'',
server:{
baseDir:'./app'
}
}),
new ExtractPlugin('[name].css')
]
}
修改origin/origin.js内容如下：
import Vue from 'vue'
new Vue({
el: '#print',
data: {
message: "hello vue!"
}
})
接着修改app/index.html内容如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>demo</title>
<link type="text/css" rel="stylesheet" href="./css/index.css" />
</head>
<body>
<p id="demo" class="demo">hello world!</p>
<p id="print">{{message}}</p>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
启动webpack -w，查看浏览器结果
到此，成功整合webpack+sass+vue！
系列文章：
webpack+sass+vue 入门教程（一）
webpack+sass+vue 入门教程（二）
wepack+sass+vue 入门教程（三）的更多相关文章
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- webpack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- webpack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- webpack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- vue入门教程 (vueJS2.X)
vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...
- 无废话ExtJs 入门教程三[窗体：Window组件]
无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...
- PySide——Python图形化界面入门教程(三)
PySide——Python图形化界面入门教程(三) ——使用内建新号和槽 ——Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...
随机推荐
- Apache执行Python脚本
由于经常需要到服务器上执行些命令,有些命令懒得敲,就准备写点脚本直接浏览器调用就好了,比如这样: 因为线上有现成的Apache,就直接放它里面了,当然访问安全要设置,我似乎别的随笔里写了安全问题,这里 ...
- “.Net 社区虚拟大会”(dotnetConf) 2016 Day 1 Keynote: Scott Hunter
“.Net 社区虚拟大会”(dotnetConf) 2016 今天凌晨在Channel9 上召开,在Scott Hunter的30分钟的 Keynote上没有特别的亮点,所讲内容都是 微软“.Net社 ...
- ABP文档 - Javascript Api - Message
本节内容: 显示信息 确认 Message API给用户显示一个信息,或从用户那里获取一个确认信息. Message API默认使用sweetalert实现,为使sweetalert正常工作,你应该包 ...
- react入门参考资料--step by step
ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出 ...
- 《你不知道的JavaScript》整理（四）——原型
一.[[Prototype]] JavaScript中的对象有一个特殊的[[Prototype]]内置属性,其实就是对于其他对象的引用. var myObject = { a: 2 }; myObje ...
- [原]分享一下我和MongoDB与Redis那些事
缘起:来自于我在近期一个项目上遇到的问题,在Segmentfault上发表了提问 知识背景: 对不是很熟悉MongoDB和Redis的同学做一下介绍. 1.MongoDB数组查询:MongoDB自带L ...
- ASP.NET MVC一次删除多笔记录
批量删除数据记录,如下面的截屏: 先选中想删除的记录,然后点一下删除铵钮,系统将把选中的记录一次性删除.在此,Insus.NET不想每删除一笔记录连接一次数据库. 因此需要把选择的记录一次上传至服务器 ...
- bzoj3037--贪心
题目大意: applepi手里有一本书<创世纪>,里面记录了这样一个故事--上帝手中有着N 种被称作"世界元素"的东西,现在他要把它们中的一部分投放到一个新的空间中去以 ...
- BPM公文管理解决方案分享
一.方案概述 公文作为一种规范性文书,具有法律性.指导性.政令性强的特点,是企事业单位政令上通下达的重要方式.及时.准确.安全地处理.控制和管理公文,方能保障企事业单位正常运转,确保组织权威和政令畅通 ...
- Android开发学习—— Broadcast广播接收者
现实中:电台要发布消息,通过广播把消息广播出去,使用收音机,就可以收听广播,得知这条消息.Android中:系统在运行过程中,会产生许多事件,那么某些事件产生时,比如:电量改变.收发短信.拨打电话.屏 ...