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 继承实例分析
Nov 04 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
7个JS基础知识总结
Mar 05 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JavaScript手风琴页面制作
May 17 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
vue中nextTick用法实例
Sep 11 Javascript
taro小程序添加骨架屏的实现代码
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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
经济信息管理专业大学生求职信
2013/09/27 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
授权委托书样本
2014/04/03 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
博士生导师推荐信
2014/07/08 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
离婚起诉书范本
2015/05/18 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python