一.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
转载：https://blog.csdn.net/Yesterday_Tomorrow/article/details/114290676