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-本来的类名
       }
     }
}

css

相关推荐