Webpack学习笔记

# 六.less-css

# 安装

yarn add less -S
1

# loader

loaders/css-loader.js

function loader(source) {
  return source
}
module.exports = loader
1
2
3
4

loaders/less-loader.js

let less = require("less")
function loader(source) {
  let css
  less.render(source, function(err, r) {
    css = r.css
  })
  return css
}
module.exports = loader
1
2
3
4
5
6
7
8
9

loaders/style-loader.js

function loader(source) {
  //我们可以在style-loader中导出一个脚本
  let str = `
        let style=document.createElement('style');
        style.innerHTML=${JSON.stringify(source)};
        document.head.appendChild(style)
        `
  return str
}
module.exports = loader
1
2
3
4
5
6
7
8
9
10

# 文件

src/index.js

import "./index.less"
1

src/index.less

@color: red;
body {
  background: @color;
}
1
2
3
4

# 配置

webpack.config.js

let path = require("path")
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: path.resolve(__dirname, "dist"),
  },
  resolveLoader: {
    modules: ["node_modules", path.resolve(__dirname, "loaders")],
  },
  watch: true,
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 打包

npx webpack
1

打开 index.html 背景是红色的

完整代码 (opens new window)

← 七.css →