2.1.6 css的编译与处理 -1
webpack是以js文件为入口打包的，那么项目的css怎么办？如何引入？
css可以通过js文件引入，但必须使用想用的loader 1、css-loader，让 css 可以被 js 正确的引入 2、style-loader，让 css 被引入后可以被正确的以一个 style 标签插入页面 3、两者的顺序很重要，要先经过css-loader处理，再有style-loader处理
1、js文件中引入css文件
import test from "./test.css";
2、webpack.config.js设置
module:{
rules: [
{
test:/\.less$/,
use:[ //loader的执行顺序是从后往前的
{
loader: ‘style-loader‘
},{
loader: ‘css-loader‘
}
]
}
]
}style-loader的核心配置
都是以style标签插入到head中，，<head><style></style></head>中 1、insertAt style标签插入在哪一块区域 2、insertInto 插入指定的dom 3、singleton 是否合并为一个style标签 4、transform 浏览器环境下，插入style到页面钱，用js对css进行操作
insertAt -- 通常不去指定
直接设置为：top/bottom（头部的上/下），也可以设置为对象
options:{
insertAt: ‘top‘,‘bottom‘
}insertInto
options:{
insertAt: {
insertInto: ‘#id‘
}
}singleton
options:{
insertAt: {
insertInto: ‘#id‘，
sinleton: true //多个style标签合为一个
}
}transform -- 指定使用哪个js文件对css进行修改
options:{
insertAt: {
insertInto: ‘#id‘，
sinleton: true，
transform: ‘./transform.js‘
}
}
transform.js
module.exports=function(css){ //css参数代表了css的所有内容
if(window.screen.width<500){
css=css.replace(‘red‘,‘yellow‘); //css是字符串，所以只能对其进行字符串的操作 ，，，不太方便
}
return css;
}css-loader 核心配置
minimize 是否压缩css -- 去掉空格，换行，webpack4.0已经移除，推荐使用uglify进行压缩 module 是否使用css模块化 -- 类似less，sass，可以使用模块的方式去写css，而不是非要用less等 alias css中的全局别名 --webpack4.0已经移除
{
loader: ‘css-loader‘,
options: {
// module: true //使用模块化
module: {
localIdentName: ‘[path][name]_[local]_[hash:4]‘ //类名会被编译，起个别名 path-路径 name-文件名 local-本来的类名
}
}
} 相关推荐
qiupu 2020-11-04
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18