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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
JavaScript数组复制详解
Feb 02 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php 获取本地IP代码
2013/06/23 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
用javascript操作xml
2006/11/04 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
警察先进个人事迹材料
2014/05/16 职场文书
师德师风整改措施
2014/10/24 职场文书
捐款通知怎么写
2015/04/24 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
学风建设主题班会
2015/08/17 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Python中字符串对象语法分享
2022/02/24 Python