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

2.1.6 css的编译与处理 -1

猜你喜欢