webpack的css处理
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标签插入app 20 // 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-dev 2 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 ]
二.提取css ----- 使用插件
安装:
npm install --save-dev extract-text-webpack-plugin
使用:
1 const ExtractTextPlugin = require("extract-text-webpack-plugin"); 2 3 module.exports = { 4 module: { 5 rules: [ 6 { 7 test: /\.css$/, 8 use: ExtractTextPlugin.extract({ 9 fallback: "style-loader", 10 use: "css-loader" 11 }) 12 } 13 ] 14 }, 15 plugins: [ 16 new ExtractTextPlugin("styles.css"), 17 ] 18 }
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;