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
多读书读好书 2020-11-03
RedCode 2020-10-28
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