3. css-loader

安装

npm install css-loader -D

loader配置方式

       module.rules 中允许我们配置多个 loader，rules属性对应的值是一个数组： [Rule]

Rule是一个对象，对象中可以设置多个属性：

• test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
• use属性：对应的值时一个数组：[UseEntry]
  • UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
  • loader：必须有一个 loader属性，对应的值是一个字符串；
  • options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
  • query：目前已经使用options来替代；
• loader属性： Rule.use: [ { loader } ] 的简写。

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build")    // 必须是一个绝对路径
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          "style-loader"
        ]
      }
    ]
  }
}

style-loader

可以通过css-loader来加载css文件，但是在代码中并 没有生效。

css-loader只是 负责将.css文件进行解析 ，并不会将解析之后的 css插入到页面 中。

如果我们希望再完成 插入style的操作 ，那么我们还需要另外一个loader，就是 style-loader 。

安装style-loader： npm install style-loader -D

配置style-loader

      {
        test: /\.css$/, 
        use: [
          "style-loader", 
          "css-loader"
        ]
      }

完整案例：

src / index.js

import "./index.css"
const element = document.createElement("div")
element.style.width = 200 + "px"
element.style.height = 200 + "px"
element.className = "box"
document.body.appendChild(element)

src/index.css

.box {
    background-color: red;
}

处理less文件

1.  Less工具处理

npm install less -D

npx less ./src/css/title.less > title.css // .bin下有lessc, 将 title.less 转换成 title.css 

2. 项目中配置 less-loader

npm install less-loader -D

      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }