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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
python学习必备知识汇总
2017/09/08 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python3中zip()函数使用详解
2018/06/29 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python