webpack打包处理css的时候需要两个loader:
style-loader 和css-loader
安装：
1 npm install style-loader css-loader --save-dev
style-loader：负责将打包生成的代码嵌入到html页面中.
css-loader:是允许将css文件引入到.js文件中；
简单的打包css的webpack.config.js文件：
1 var path = require(‘path‘) 2 module.exports = { 3 ????entry:{ 4 ????????app:‘./src/app.js‘ 5 ????}, 6 ????output: { 7 ????????path:path.resolve(__dirname,‘dist‘), 8 ????????publicPath: "./dist/", 9 ????????filename: "[name].bundle.js"10 ????},11 ????module:{12 ????????rules:[13 ????????????{14 ????????????????test:/\.css$/,15 ????????????????use:[16 ????????????????????{17 ????????????????????????loader:‘style-loader‘,//在html页面中插入<style>标签；18 ????????????????????????// options:{19 ????????????????????????// ????insertInto:‘#app‘,//将打包成的style标签插入app20 ????????????????????????// ????singlleton:true,//只生成一个style标签21 ????????????????????????// ????transfrom:‘./css.transform.js‘//css的变形，它会在打包生成的标签插入html页面的时候生效，因此还可以获取浏览器的相关信息22 ????????????????????????// }23 ???????????????????????// loader:‘style-loader/url‘//会在头部插入<link>标签//如果打包多个文件会生成 多个link，影响性能，推荐使用上一种；24 ????????????????????????//loader:"style-loader/useable"//控制样式插入或者不插入页面中；25 26 ????????????????????},27 ????????????????????{28 ????????????????????????loader:‘css-loader‘,29 ????????????????????????// loader:‘file-loader‘,30 ????????????????????????options:{31 ????????????????????????????minimize:true,32 ????????????????????????????modules:true//开启了modules，在js中引入css文件以后，就可以导出css文件，点.出css文件中的内容；33 ????????????????????????}34 ????????????????????}35 ????????????????]36 ????????????}37 ????????]38 ????}39 }style-loader:有一个options配置，包括：
1.inserAt:形成的标签插入的位置；
2.insertInto:插入到dom
3.singleton:true/false是否只使用一个style标签
4.transform:转化，是在浏览器环境下生效，插入页面之前；可以进行和浏览器相关的页面样式操作
如：css.transform.js文件：
1 module.exports = function (css) {2 ????console.log(css)3 ????console.log(window.innerWidth)4 ????if(window.innerWidth >= 768){5 ????????return css.replace(‘red‘,‘green‘)6 ????}else{7 ????????return css.replace(‘red‘,‘orange‘)8 ????}9 }style-loader的两个同类：
1.style-loader/url：是将打包的代码以Link的形式插入到页面中；
2.style-loader/useable：是否允许插入引入的文件，在.js中使用
css的options配置项：
1.alias(解析的别名）
2.importLoader(@import)
3.Minimize(是否压缩）
4.modules(启用css-modules)
css-Modules的参数：
1.：local
2.global
3.compose
4.compose...from path
compose使用代码：
1 .box ?{2 ????composes: bigBox from ‘./common.css‘;//为了优先级，默认将引入的写入到括号中的第一行3 ????width: 200px;4 ????height: 200px;5 ????background: skyblue;6 ????border-radius:5%;7 }less与sass配置：
安装：
1 npm install less-loader less --save-dev2 npm install sass-loader node-sass --save-dev
配置代码：
1 ?rules:[ 2 ????????????{ 3 ????????????????test:/\.less$/, 4 ????????????????use:[ 5 ????????????????????{ 6 ????????????????????????loader:‘style-loader‘,//在html页面中插入<style>标签； 7 ????????????????????????// options:{ 8 ????????????????????????// ????insertInto:‘#app‘,//将打包成的style标签插入app 9 ????????????????????????// ????singlleton:true,//只生成一个style标签10 ????????????????????????// ????transfrom:‘./css.transform.js‘//css的变形，它会在打包生成的标签插入html页面的时候生效，因此还可以获取浏览器的相关信息11 ????????????????????????// }12 ???????????????????????// loader:‘style-loader/url‘//会在头部插入<link>标签//如果打包多个文件会生成 多个link，影响性能，推荐使用上一种；13 ????????????????????????//loader:"style-loader/useable"//控制样式插入或者不插入页面中；14 15 ????????????????????},16 ????????????????????{17 ????????????????????????loader:‘css-loader‘,18 ????????????????????????// loader:‘file-loader‘,19 ????????????????????????options:{20 ????????????????????????????minimize:true,21 ????????????????????????????modules:true//开启了modules，在js中引入css文件以后，就可以导出css文件，点.出css文件中的内容；22 ????????????????????????}23 ????????????????????},24 ????????????????????{25 ????????????????????????loader:‘less-loader‘26 ????????????????????}27 ????????????????]28 ????????????}29 ????????]webpack的css处理
原文地址：https://www.cnblogs.com/yangguoe/p/9887310.html