How to pack and separate less? Introduction to methods of packaging and separating less

This article brings you information about how to package and separate less? The introduction to the methods of packaging and separating less has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Packaging and separating less

1. Install less service

npm install –save-dev less

2. Install less-loader for packaging and use

npm install –save-dev less-loader

3. Configure loader:

{   test: /\.less$/,
   use: [{
          loader: "style-loader" // creates style nodes from JS strings       }, {           loader: "css-loader" // translates CSS into CommonJS
       , {
           loader: "less-loader" // compiles Less to CSS       }]
}

4. Insert

<p id="lessLearn"></p>
<p><img src="./images/10.jpg"/></p>
<p id="pic"></p>
<p id="title"></p>

in src/index.html 5. Write a black.less file in the src/css/ directory

@base:#000;#lessLearn{    width:300px;
    height:200px;
    background-color:@base;}

6. In src Introduce less into /entry.js

import less from ‘./css/black.less’

7. Delete the dist directory and enter webpack for packaging. After the packaging is successful, check that there is no #lessLearn style in dist/css/index.css (==packaged into js ==)

8. npm run server running result

You can add –open to the server in the script in package.json, and the browser will open the page by itself
"server": "webpack-dev-server –open",

9. If you want to separate js and less in the entry, you need to modify the use of less configuration under the module in webpack-config.js. Modify

use:extractTextPlugin.extract({    use:[{
      loader:'css-loader'
    },{      loader:'less-loader'
    }],    fallback:'style-loader'
  })

as follows:

10. Delete the dist folder and package it with webpack. You will see the style definition of less in dist/css/index.css (that is, separate css and js )

11. npm run build Run browser

Related recommendations:

How to reference images in css? How to reference images in css

#How to package css files? How to package css files

The above is the detailed content of How to pack and separate less? Introduction to methods of packaging and separating less. For more information, please follow other related articles on the PHP Chinese website!