@nice-blue: #5b83ad; body { background: @nice-blue; }
let path = require(‘path‘);
module.exports = {
mode: ‘development‘,
entry: ‘./src/index.js‘,
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
},
module: {
rules: [
{
test: /\.less$/,
use: [
path.resolve(__dirname, ‘loader‘, ‘style-loader‘),
path.resolve(__dirname, ‘loader‘, ‘less-loader‘)
]
}
]
}
}
let less = require(‘less‘)
function loader(source) {
let css = ‘‘;
less.render(source, function (err, c) {
css = c.css
})
css = css.replace(/\n/g, ‘\\n‘)
return css;
}
module.exports = loader;
less-loader.js
style-loader.js function loader(source) { let style = ` let style = document.createElement(‘style‘); style.innerHTML = ${JSON.stringify(source)} document.head.appendChild(style) ` return style } module.exports = loader
getSource(modulePath) { let rules = this.config.module.rules; let content = fs.readFileSync(modulePath, ‘utf8‘); // 拿到每个规则来处理 for (let i = 0; i < rules.length; i++) { let rule = rules[i]; let { test, use } = rule; let len = use.length - 1; if (test.test(modulePath)) { // 这个模块需要通过loader来转化 // loader获取对应的loader函数 function normalLoader() { let loader = require(use[len--]); // 递归调用loader 实现转化功能 content = loader(content); if (len >= 0) { normalLoader(); } } normalLoader(); } } return content }
原文：https://www.cnblogs.com/guangzhou11/p/12543252.html