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 ...
随机推荐
- ElasticSearch入门3: 高级查询
单字段 模糊匹配查询与精准查询 postman请求 POST 127.0.0.1:9200/book/_search 请求json: { "query":{ "match ...
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- 安装的Android SDK下无doc文件夹问题 以及关联Android帮助文档和查看文档 以及查看在线文档
参考连接:https://blog.csdn.net/fangzicheng/article/details/78344521 https://jingyan.baidu.com/article/29 ...
- JavaScript初探一
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- C#控件事件属性大全
C#控件及常用设计整 1.窗体... 1 2.Label 控件... 3 3.TextBox 控件... 4 4.RichTextBox控件... 5 5.NumericUpDown 控件... 7 ...
- [Java初探实例篇02]__流程控制语句知识相关的实例练习
本例就流程控制语句的应用方面,通过三个练习题来深入学习和巩固下学习的流程控制语句方面的知识,设计到,if条件判断语句,switch多分支语句,for循环语句及其嵌套多层使用,while循环语句. 练习 ...
- PHP多进程系列笔记（一）
本系列文章将向大家讲解pcntl_*系列函数,从而更深入的理解进程相关知识. PCNTL在PHP中进程控制支持默认是关闭的.您需要使用 --enable-pcntl 配置选项重新编译PHP的 CGI或 ...
- slf4j 作用及logback概述
为什么要使用slf4j 现实场景: 我们自己的系统中使用了logback这个日志系统 我们的系统使用了A.jar,A.jar中使用的日志系统为log4j 我们的系统又使用了B.jar,B.jar中使用 ...
- Nginx性能优化功能- Gzip压缩(大幅度提高页面加载速度)
Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能! Web网站上的图片,视频等其它多媒体文件以及大文件,因 ...
- Windows安装Apache2.4和PHP5.6
VC11 下载安装http://www.microsoft.com/en-us/download/details.aspx?id=30679 ================= PHP(5.6) VC ...