使用的webpack中的loader 可以处理css文件，其原理为同过laoder 将css代码转化为文本，通过js新建一个style元素再将其innerHTML 的值赋值为css的代码再将其style元素添加进页面

案例

项目目录结构如下
image.png
webpack.config.js 的代码如下

  2.     module.exports = {
  3.         devtool:'source-map',
  4.         module:{
  5.             rules:[{
  6.                 test:/\.css$/,  // 匹配所有css文件
  7.                 use:["./loarders/sytle-loader.js"], //使用加载器
  8.             }]
  9.         }
  10.     }

loader.js的代码如下 

  1. module.exports = function(sourceCode){
  2.     var code = `
  3.     var style = document.createElement("style");
  4.     style.innerHTML = \`${sourceCode}\`;
  5.     document.head.appendChild(style);
  6.     module.exports = \`${sourceCode}\`
  7.     `
  8.     return code;
  9. }

为何返回将其代码以文本的形式返回出去呢 ？ 看最下面
index.js 的代码如下

  1. var content = require("./assets/index.css");
  2. console.log(content) //css的源码字符串

index.css 的代码如下

  1. body{
  2.     background: red;
  3. }

index.html 代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script src="./dist/main.js"></script>
  10. </body>
  11. </html>

打包后代码如下
image.png
运行效果
image.png

为何loader.js返回的是代码呢？

loader.js的代码如下 

  1. module.exports = function(sourceCode){
  2.     var code = `
  3.     var style = document.createElement("style");
  4.     style.innerHTML = \`${sourceCode}\`;
  5.     document.head.appendChild(style);
  6.     module.exports = \`${sourceCode}\`
  7.     `
  8.     return code;
  9. }

image.png
看**这张图，你会发现loaders 的运行环境是node环境，node环境是无法识别浏览器端的代码，那样会让打包时报错的，故将代码返回回去，到浏览器端在运行。**