webpack+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 入门教程（二）
webpack+sass+vue 入门教程（三）的更多相关文章
- 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 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- 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 ...
- 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 ...
随机推荐
- 分享 ： 警惕MySQL运维陷阱：基于MyCat的伪分布式架构
分布式数据库已经进入了全面快速发展阶段.这种发展是与时俱进的,与人的需求分不开,因为现在信息时代的高速发展,导致数据量和交易量越来越大.这种现象首先导致的就是存储瓶颈,因为MySQL数据库实质上还是一 ...
- java开发细节问题，spring的单例模式，多线程同步问题
1.对象的赋值,new一个对象,然后在传递给函数赋值,往往这对对象赋值就可以使用了 2.对于 spring开发的细节问题 Spring框架里的bean,或者说组件,获取实例的时候都是默认的单例模式,这 ...
- Bootstrap in ASP.NET MVC 5
一,新建ASP.NET MVC 5 项目 Bootstrap 文件分布 引入到页面 1.定义.注意:不要包含有.min.的文件名称,会被忽略,因为在发布的时候编译器会加载min版的文件 2.在母版页中 ...
- SpringBoot入门 (十三) WebSocket使用
本文记录在SpringBoot中使用WebSocket. 一 什么是WebSocket WebSocket是基于TCP协议的一种网络协议,它实现了浏览器与服务器全双工通信,支持客户端和服务端之间相互发 ...
- Tomcat学习总结（9）——Apache Tomcat 8新特性
一.Apache Tomcat 8介绍 Apache Tomcat 8RC1版于2013年8月份发布.它 经过了2年的开发,引入了很多新特征,由于目前还只是Alpha版,故不推荐在产品中使用.但是我们 ...
- 【区块链Go语言实现】Part 2：工作量证明机制POW
0x00 介绍 在上一篇文章中,我们建立了一个非常简单的数据结构,它是区块链数据库的本质.并且,我们实现了以类似链条关系的方式向其中添加区块的功能:每个区块都会链接到前一区块.然而,我们实现的区块链有 ...
- Spark2.1.0——深入浅出度量系统
Spark2.1.0--深入浅出度量系统 对于一个系统而言,首先考虑要满足一些业务场景,并实现功能.随着系统功能越来越多,代码量级越来越高,系统的可维护性.可测试性.性能都会成为新的挑战,这时监控功能 ...
- Docker swarm 实战-部署wordpress
Docker swarm 实战-部署wordpress 创建一个overlay的网络 docker network create -d overlay demo 6imq8da3vcwvj2n499k ...
- _ViewStart文件应用
在这篇<MVC母版页_Layout.cshtml>http://www.cnblogs.com/insus/p/3380419.html中,把一些已经存在的视图或是新产生的视图加入母版中. ...
- Ubuntu安装完成后设置root密码
安装完ubuntu后没有默认的root密码,如果要设置root密码需要进行如下步骤: 1 sudo passwd 2 连续输入两次新密码