webpack的css处理

webpack打包处理css的时候需要两个loader:

style-loader 和css-loader

安装:

 npm install style-loader css-loader --save-dev

style-loader:负责将打包生成的代码嵌入到html页面中.

css-loader:是允许将css文件引入到.js文件中;

简单的打包css的webpack.config.js文件:

 var path = require('path')
module.exports = {
entry:{
app:'./src/app.js'
},
output: {
path:path.resolve(__dirname,'dist'),
publicPath: "./dist/",
filename: "[name].bundle.js"
},
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:'style-loader',//在html页面中插入<style>标签;
// options:{
// insertInto:'#app',//将打包成的style标签插入app
// singlleton:true,//只生成一个style标签
// transfrom:'./css.transform.js'//css的变形,它会在打包生成的标签插入html页面的时候生效,因此还可以获取浏览器的相关信息
// }
// loader:'style-loader/url'//会在头部插入<link>标签//如果打包多个文件会生成 多个link,影响性能,推荐使用上一种;
//loader:"style-loader/useable"//控制样式插入或者不插入页面中; },
{
loader:'css-loader',
// loader:'file-loader',
options:{
minimize:true,
modules:true//开启了modules,在js中引入css文件以后,就可以导出css文件,点.出css文件中的内容;
}
}
]
}
]
}
}

style-loader:有一个options配置,包括:

  1.inserAt:形成的标签插入的位置;

  2.insertInto:插入到dom

  3.singleton:true/false是否只使用一个style标签

  4.transform:转化,是在浏览器环境下生效,插入页面之前;可以进行和浏览器相关的页面样式操作

如:css.transform.js文件:

 module.exports = function (css) {
console.log(css)
console.log(window.innerWidth)
if(window.innerWidth >= 768){
return css.replace('red','green')
}else{
return css.replace('red','orange')
}
}

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使用代码:

 .box  {
composes: bigBox from './common.css';//为了优先级,默认将引入的写入到括号中的第一行
width: 200px;
height: 200px;
background: skyblue;
border-radius:5%;
}

less与sass配置:

安装:

 npm install less-loader less --save-dev
npm install sass-loader node-sass --save-dev

配置代码:

  rules:[
{
test:/\.less$/,
use:[
{
loader:'style-loader',//在html页面中插入<style>标签;
// options:{
// insertInto:'#app',//将打包成的style标签插入app
// singlleton:true,//只生成一个style标签
// transfrom:'./css.transform.js'//css的变形,它会在打包生成的标签插入html页面的时候生效,因此还可以获取浏览器的相关信息
// }
// loader:'style-loader/url'//会在头部插入<link>标签//如果打包多个文件会生成 多个link,影响性能,推荐使用上一种;
//loader:"style-loader/useable"//控制样式插入或者不插入页面中; },
{
loader:'css-loader',
// loader:'file-loader',
options:{
minimize:true,
modules:true//开启了modules,在js中引入css文件以后,就可以导出css文件,点.出css文件中的内容;
}
},
{
loader:'less-loader'
}
]
}
]

二.提取css ----- 使用插件

  安装:

 npm install --save-dev extract-text-webpack-plugin

使用:

 const ExtractTextPlugin = require("extract-text-webpack-plugin");

 module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
上一篇:C#接口和抽象类的区别


下一篇:【斜优DP】bzoj4518-Sdoi2016征途