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 相关文章推荐
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
解决vue scoped html样式无效的问题
Oct 24 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
使用dump函数,给php加断点测试
2013/06/25 PHP
php url路由入门实例
2014/04/23 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python编程实现使用线性回归预测数据
2017/12/07 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
python中def是做什么的
2020/06/10 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python time.strptime格式化实例详解
2021/02/03 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
广告宣传策划方案
2014/05/21 职场文书
会计学毕业生求职信
2014/06/25 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
出售房屋委托书范本
2014/09/24 职场文书
公司2014年度工作总结
2014/12/10 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
《比的意义》教学反思
2016/02/18 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python