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 ...
随机推荐
- Is it possible to display icons in a PopupMenu?
I really like the new PopupMenu we got in 3.0, but I just can't display any icons next to the menu i ...
- 使用java调用fastDFS客户端进行静态资源文件上传
一.背景 上篇博客我介绍了FastDFS的概念.原理以及安装步骤,这篇文章我们来聊一聊如何在java中使用FastDFSClient进行静态资源的上传. 二.使用步骤 1.开发环境 spring+sp ...
- 如何让你的网站用上免费的HTTPS
因为之前网站上被注入了广告,再百般尝试之后最后还是使用了HTTPS解决了. 在实现HTTPS的时候最关键的就是证书. 证书的质量觉得了你被多少浏览器所信任. 证书的价格也就蹭蹭蹭往上涨了. 这里推荐一 ...
- 前端组件化Polymer入门教程(6)——监听属性值变化
监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...
- log4jdbc 与 logback 集合打印日志过多的解决
在项目中使用了log4jdbc,可以很方便的把sql的参数也打印出来,便于问题调试.比如原始sql: select * from t_order where order_id = ? : 经过log4 ...
- 更改导入项目时weblogic运行库
1.在项目上点击右键->Properties->Server->选择weblogic的server->点击Apply按钮:2.在项目上点击右键->Properties-& ...
- ASP.NET MVC实现剪切图片
开发需要,我们需要对某一张图片进行剪切.就是说,获取图片某一区域.下面Insus.NET教大家轻便容易实现它. 首先写好一个处理函数,它建在MVC应用程序结构Utilities目录下: 准备好一张图片 ...
- Linux下安装SQL Server 2016（准备篇SQL Server on linux）
要在Linux安装sql server,首先的先有linux,下面会讲下载,然后安装Linux. 一.下载centos 7.2 : Centos 7.2下载 大概4G左右,这个链接的下载速度还是非常快 ...
- C# fileUpload视频上传
要实现大文件上传必须配置webConfig例如: <system.web> <compilation debug="true" targetFramework=& ...
- 【转】.NET NPOI操作Excel常用函数
最近因项目接触了NPOI,感觉还是蛮不错的,网络上的教程普遍版本较老,本篇记录所常用操作,采用NPOI 2.0版本. 推荐: NPOI官方网站 NPOI 1.2.4/1.2.5 官方教程 新建Exce ...