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 ...
随机推荐
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Solr_全文检索引擎系统
Solr介绍: Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务.Solr可以独立运行在Jetty.Tomcat等这些Servlet容器中. Solr ...
- 关于全局ID，雪花（snowflake）算法的说明
上次简单的说一下:http://www.cnblogs.com/dunitian/p/6041745.html#uid C#版本的国外朋友已经封装了,大家可以去看看:https://github.co ...
- 这些.NET开源项目你知道吗？.NET平台开源文档与报表处理组件集合(三)
在前2篇文章这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧 和这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,大伙热情高涨.再次拿出自己的私货,在.NET平台 ...
- Android数据加密之SHA安全散列算法
前言: 对于SHA安全散列算法,以前没怎么使用过,仅仅是停留在听说过的阶段,今天在看图片缓存框架Glide源码时发现其缓存的Key采用的不是MD5加密算法,而是SHA-256加密算法,这才勾起了我的好 ...
- CSS 特殊属性介绍之 pointer-events
首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target.当未指定该属性时,SVG 内 ...
- WebApi - 路由
这段时间的博客打算和大家一起分享下webapi的使用和心得,主要原因是群里面有朋友说希望能有这方面的文章分享,随便自己也再回顾下:后面将会和大家分不同篇章来分享交流心得,希望各位多多扫码支持和点赞,谢 ...
- P2V之后的磁盘扩容新思路
背景: 原先的物理机环境多是若干块物理磁盘经过RAID卡进行了RAID5之后的虚拟磁盘组,这样我们在操作系统内看到的也就是一块完整的磁盘.我们会在上面进行分区,然后格式化后以便使用. Figure 1 ...
- 漫谈C#编程语言在游戏领域的应用
0x00 前言 随着微软越来越开放,C#也变得越来越吸引人们的眼球.而在游戏行业中,C#也开始慢慢地获得了关注.这不, 网易绝代双娇手游团队已经全面使用.Net Core支持前后端统一C#开发,跨平台 ...
- webix前端架构的项目应用
webix框架兼容javascript.HTML.CSS,应用比较灵活,应用框架时,配合后台webAPI,整个web项目里面,App文件夹保存前台的多语言文件,图片文件,webix原代码js.css, ...