css的处理
相关loader :
1.style-loader(处理标签, 生成插入html) –> style-loader/url style-loader/useable
2.css-loader (处理js引入css)
安装: npm install style-loader css-loader –save-dev
准备页面:
app.js
import './css/base.css'
import './css/common.css'
base.css
html{
background: blue;
}
common.css
body{
color: #fff;
}
使用style-loader/useable 时 , 要改变app.js, 修改如下
import base from './css/base.css'
import common from './css/common.css'
base.use()
base.unuse()
var flag = false;
setInterval(function(){
if(flag){
base.use()
}else{
base.unuse();
}
flag = !flag;
},500)
对应的webpack.config.js 修改为:
{
test:/\.css$/,
use: [
{loader:'style-loader/useable'}, // 通过条件判断是否使用指定的css
{loader:'css-loader'}
],
}
配置options
style-loader的参数:
insertAt 插入位置
insertInto 插入到dom
singleton 是否只使用一个style标签
transform 转化, 浏览器环境下,插入页面前
{
test:/\.css$/,
use: [
{
loader:'style-loader',
options:{
insertInto:'#app', // 打包的css插入到#app的底部
singleton: true, // 将多个css文件打包到一个style中
transform:'./css.transform.js' // 在插入到html中时进行的css操作
}
},
{loader:'css-loader'} // 通过style方式插入到html中
],
}
css.transform.js
// 在浏览器中运行, 当style插入到dom中时执行
module.exports = function(css){
// ... 其他的相关操作
console.log(window.innerWidth)
if(window.innerWidth > 500){
return css.replace('blue','red')
}else{
return css.replace('blue','yellow')
}
}
css-loader的参数
alias (解析的别名)
impotLoader (@import )
minimize (是否压缩) css-loader 版本^1没有效果
modules (启用css-modules css模块化) ”
css模块化的语法:
:local: 本地的样式
:global: 全局的样式
compose: 继承样式
compose … from path : 从一个文件中引入某一个样式