webpack配置sass模块的加载的方法


Posted in Javascript onJuly 30, 2017

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。

为了使用sass,我们需要安装sass的依赖包

//在项目下,运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install --save-dev node-sass

当然了,使用样式的话,css-loader和style-loader也是必须的依赖包,如果没有安装,可以类似上述的方法安装

  1. css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能;
  2. style-loader将所有的计算后的样式加入页面中;

二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。 

下面是webpack.config.js文件的部分配置:

var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
 ....
 module: {
  loaders: [
   //解析.css文件
   {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract("style", 'css')
   },
   //解析.vue文件
   {
    test: /\.vue$/,
    loader: 'vue'
   }, 
   //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载,以及<style lang="sass">...</style>声明的内部样式进行加载
   {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件,如果不想分离出来,可以直接这样写 loader:'style!css!sass'
   }
  ]
 },
 //.vue文件的配置,以下是为了在.vue文件中使用ES6语法(必须安装babel相关的依赖包),以及把使用css或sass语法的样式提取出来,如果不需要可以忽略
 vue: {
  loaders: {
   js: 'babel', 
   css: ExtractTextPlugin.extract("css"),
   sass: ExtractTextPlugin.extract("css!sass")   
  },
 },
 plugins: [
  new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
 ]
 ....
}

sass的使用如下,例如:

引入外部样式,下面两种写法都可以使用:

import '../../css/test.scss'
require('../../css/test2.scss');

在.vue文件中使用

<style lang="sass">
  //sass语法样式
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
Javascript remove 自定义数组删除方法
Oct 20 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 #Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 #Javascript
webpack实现热加载自动刷新的方法
Jul 30 #Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 #Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 #Javascript
关于前后端json数据的发送与接收详解
Jul 30 #Javascript
jquery easyui如何实现格式化列
Jul 30 #jQuery
You might like
一段php加密解密的代码
2006/10/09 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
JavaScript错误处理
2015/02/03 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
Python数据结构之Array用法实例
2014/10/09 Python
Python入门篇之对象类型
2014/10/17 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
2014年统战工作总结
2014/12/09 职场文书
评职称个人总结
2015/03/05 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书