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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
JavaScript注册时密码强度校验代码
Jun 30 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
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
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
非常实用的php验证码类
2016/05/15 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
php中strtotime函数性能分析
2016/11/20 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
pycharm 使用心得(三)Hello world!
2014/06/05 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
台湾三立电视电商平台:电电购
2019/09/09 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
小学生自我评价范文
2014/01/25 职场文书
八一建军节活动方案
2014/02/10 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python