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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
简单了解three.js 着色器材质
Aug 03 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python的sorted用法详解
2019/06/25 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python 贪心算法的实现
2020/09/18 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
办公室主任岗位承诺书
2014/05/29 职场文书
治庸问责心得体会
2014/09/12 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2015教师见习期工作总结
2014/12/12 职场文书