webpack处理 css\less\sass 样式的方法


Posted in Javascript onAugust 21, 2017

本文介绍了webpack处理 css\less\sass 样式的方法,分享给大家,具体如下:
(一)处理普通的.css 文件,需要安装 css-loader,style-loader

.less 文件,需要安装 less-loader

.sass 文件,需安装  less-loader

npm install --save-dev css-loader
npm install --save-dev css-loader
npm install less-loader --save-dev

(二)在项目中,我们会遇到 不同浏览器,前缀不同。比如 display: flex ,在IE以及谷歌下前缀是不同的,

这时候,我们需要 postcss 这样的插件

npm install postcss-loader --save-dev
npm install autoprefixer --save-dev

安装好相关loader后,我们需要在webpack.config.js 中 加入相关配置代码,如下

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
  /*context: __dirname,*/
  entry: './src/app.js',

  output: {
    path: './dist',
    filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
  },
  module: {
    loaders: [
      {
        test: /\.css$/, //正则表达式,匹配.css文件
        loader: 'style!css?importLoaders=1!postcss' //处理顺序 从右到左







// ?importLoaders=1 表示 引入嵌入的 css文件也会按照postcss这样自动添加前缀
      },
      {
        test: /\.less$/,
        loader: 'style!css!postcss!less'
      }
    ],
    rules: [{
      test: /\.(css|scss|less)$/,
      loader:"style-loader!css-loader?importLoaders=1!postcss-loader" //由于webpack2.X 版本对post-css书写方式的改变






















  //需要新添加 postcss.config.js
    }] 
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html', //通过模板生成的文件名
      template: 'index.html',//模板路径
      inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接

    })
  ]
};

postcss.config.js 代码如下

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: 'last 5 version' //前五种浏览器版本
    })
  ]
};
import layer from './components/layer/layer.js';
import './css/common.css';

const App = function () {
  console.log(layer);
}

new App();

layer.js

import './layer.less';

function layer(){
  return{
    name:'layer',
    tpl:'tpl'
  };
}

export default layer;
//layer.less
.layer{
 width:600px;
 height: 200px;
 border: 1px solid yellow;
}

//common.css
@import "flex.css";
html{
  background-color: red;
}

ul,li{
  padding:0;
  margin:0;
  list-style:none;
}
.styleFlex {
  display: flex;
}

//flex.css
.flexFlex {
  display: flex;
}

使用webpack 编译后,可以查看,相关css以及被编译在index.html,前缀css 自动完成。

webpack处理 css\less\sass 样式的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 #Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
You might like
PHP Cookie的使用教程详解
2013/06/03 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
2011/07/26 Javascript
移动节点的jquery代码
2014/01/13 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python实现图书管理系统
2018/03/12 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python自动抢红包教程详解
2019/06/11 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
大学毕业自我鉴定范文
2014/02/03 职场文书
创业计划书如何编写
2014/02/06 职场文书
2015大学生求职信范文
2015/03/20 职场文书
城南旧事观后感
2015/06/11 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
python for循环赋值问题
2021/06/03 Python
Nginx速查手册及常见问题
2022/04/07 Servers