十一、安装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！

原文入口:http://www.jianshu.com/p/4f280974f664

系列文章：

webpack+sass+vue 入门教程（一）

webpack+sass+vue 入门教程（二）

webpack+sass+vue 入门教程（三）的更多相关文章

  1. webpack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  2. webpack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  3. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  4. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  5. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  6. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  7. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  8. 无废话ExtJs 入门教程三[窗体：Window组件]

    无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...

  9. PySide——Python图形化界面入门教程(三)

    PySide——Python图形化界面入门教程(三) ——使用内建新号和槽 ——Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...

随机推荐

  1. C#控件事件属性大全

    C#控件及常用设计整 1.窗体... 1 2.Label 控件... 3 3.TextBox 控件... 4 4.RichTextBox控件... 5 5.NumericUpDown 控件... 7 ...

  2. C#数据仓储类

    https://ninesky.codeplex.com/SourceControl/latest /*============================== 版本:v0.1 创建:2016.2 ...

  3. android app启动过程

    Native进程的运行过程 一般程序的启动步骤,可以用下图描述.程序由内核加载分析,使用linker链接需要的共享库,然后从c运行库的入口开始执行. 通常,native进程是由shell或者init启 ...

  4. 第一次项目上Linux服务器（一：远程连接服务器）

    一.准备工作 1.Linux服务器一台,以及服务器ip.用户名.密码 2.安装xfttp和xshell软件,资源链接,百度云链接:https://pan.baidu.com/s/1vwnlbBpmjX ...

  5. （转）Spring常见注解总结

    传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.事物,这么做有两个缺点: 1.如果所有的内容都配置在.xml文件中,那么.xml文件将会十分庞大:如果按需求分开.xml文 ...

  6. linux笔记-tar 解压缩命令

    tar 解压缩命令 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只 ...

  7. ActiveMQ P2P版的HelloWorld

    1.2 JMS应用程序接口 ConnectionFactory: 用户用来创建到JMS提供者的连接的被管对象.JMS客户通过可移植的接口访问连接,这样当下层的实现改变时,代码不需要进行修改. 管理员 ...

  8. 【转】CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...

  9. MVC应用程序实现上传文件(续)

    前几天,有练习了<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html 那只是把文档上传至MVC应用程序下的某一目录之中. 其 ...

  10. C# winform 无边框 窗体的拖动

    当船体设置为FormborderStyle='none' [DllImport("user32.dll")] public static extern bool ReleaseCa ...