一.Webpack处理CSS
style-loader 是为了在html中以style得方式嵌入css
编译顺序是先用css-loader将css代码编译,再交给style-loader插入到网页里面去
file-loader 将文件(一般是图片文件为主,其他的包括字体文件等),在进行一些处理后移动打包后的目录中
module:{
rules:[{
test:/\.css$/,
use:[{
loader:'style-loader'
},{
loader:'css-loader'
}],
exclude:/(node_modules)/
}]
}
import a from './css/a.css'
二.style-loader
style-loader:配合css-loader使用,以<style></style>形式在html页面中插入css代码
style-loader/url:以link标签形式向html页面中插入代码,采用这种方式需要将css-loader变为file-loader,但这种放使不推荐,因为如果在一个js文件中引入多个css文件会生成多个Link标签,而html每个link标签都会发送一次网络请求,所以这种放使并不建议
style-loader/useable:采用这种方式使用处理css,会有use()和unuse()两种方法,use()开启引入样式,unuse()不适用样式
module:{
rules:[{
test:/\.css$/,
use:[{
loader:'style-loader/url'
},{
loader:'file-loader'
}],
exclude:/(node_modules)/
}]
}
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].bundle.js',
publicPath:'dist/'
},
module:{
rules:[{
test:/\.css$/,
use:[{
loader:'style-loader/useable'
},{
loader:'css-loader'
}],
exclude:/(node_modules)/
}]
}
import a from './css/a.css';
let flag = false;
setInterval(()=>{
if(flag){
flag = false
a.unuse()
}else{
flag = true
a.use
}
})
attrs:attrs是一个对象,以键值对出现,在<style></style>标签中以key=value出现,键值对可以自定义,但是使用时建议语义化
insetAt:有两个值top|bottom,如果不配置insertAt则默认为bootom,当insertAt为'top'时,loader打包的css将优先已经存在的css
transform:函数的参数是css,这时我们拿到的css样式是以字符串的形式,所以可用replace方法修改样式,transform.js可以通过style-loader会根据需要在css未加载到的页面之前修改样式,在函数中我们可以获取到浏览器的相关信息,比如window,navigator等,这有助于我们更具相关信息修改样式
module:{
rules:[{
test:/\.css$/,
use:[{
loader:'style-loader',
options:{
attrs:{
first:1
}
}
}]
}]
}
<style fitst="1" type="text/css">
html{
background-color-yellow;
}
</style>
module.exports = function(css){
if(window.innerWidth >= 900){
return css.replace('yellow','blue')
}else{
return css.replace('yellow','green')
}
}
Minimize:true or false,是否开启css代码压缩,比如压缩空格不换行。
import a from './css/a.css'
document.getElementById('app').className = a.box1
{
loader:'css-loader',
options:{
modules:true,
localIndentName:"[path][name]-[local]-[hash:5]"
}
}
.box1{
composes:box2 from './b.css';
width:400px;
height:400px;
background-color:red;
}
{
loader:'css-loader',
options:{
modules:true,
minimize:true
localIndentName:"[path][name]-[local]-[hash:5]"
}
}
npm uninstall css-loader
npm i css-loader@0 -D