1. Webpack. config configuration

      {
        test: /\.less$/,
        use: [
          'my-style-loader'.'my-css-loader'./ / {
          // loader: 'postcss-loader',
          // },
          {
            loader: 'my-less-loader'.options: {
              sourceMap: true,},},],},Copy the code

2. Implement my-less-loader

const less = require('less')

module.exports = function (source) {
  less.render(source, (err, output) = > {
    console.log('less-loader output:', output)
    this.callback(err, output.css)
    // output.css contains escaped CSS code})}Copy the code

3. Implement mY-CSS-loader

// css-loader serializes

module.exports = function (source) {
  const data = JSON.stringify(source)
  console.log('CSS-loader serialization:')
  console.log(data)
  return data
}


Copy the code

4. Implement my-style-loader

module.exports = function (source) {
  return `
   const tag = document.createElement('style');
   tag.innerHTML = ${source};
   document.head.appendChild(tag)
  `
}

Copy the code