Webpack Simple Tutorial (2)--use less and create a separate CSS style

Source: Internet
Author: User
Tags create index

Configure and use less to generate CSS styles directly in Webpack

1. Create a folder in the F drive webpack-less

2. Create a index.html in the folder

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Webpack Demo</title>    <Linkrel= "stylesheet"href= "Dist/index.css"></Head><Body>    <Divclass= "Demo1"></Div>    <Scriptsrc= "Dist/bundle.js"></Script></Body></HTML>

3. Create Index.js

Console.log ("Webpack run successfully!!!") ); require ("./index.less");

4. Create Index.less

@width: 100px; @height: 100px;body {    background:#fff;} . Borderr (@w:50%){    border-radius: @w;} . Demo1 {     width:@width;      height:@height;      . Borderr ();     Background:red;}

5. Create Webpack.config.js

 var  extracttextplugin = require (' Extract-text-webpack-plugin '  = './index.js ' ,//export path PUBLICPATH: '/dist '  './bundle.js '//filename  }, plugins:[ new  extracttextplugin ('./index.css ' )//parse less and detach CSS], module:{rules:[{test: /\.less$/ ' Css-loader ', ' less-loader ' 

6, in the folder blank Shift + Right, check here to open the command window

7. Enter NPM init on the command line to set up your project information. (Here the direct enter to the end or the input command NPM init-y) is recommended here with NPM Init-y

8. Enter NPM install Webpack webpack-dev-server--save-dev on the command line (partial installation-recommended) NPM install Webpack webpack-dev-server--g

9. In the command line, enter NPM i less less-loader css-loader style-loader extract-text-webpack-plugin-d

10. Enter Webpack on the command line to perform the compilation

11. Enter webpack-dev-server on the command line to start the server.

12. Enter http://localhost:8080/index.html in the browser to access the page

13, modify the index.less (note that the browser will automatically refresh the page when saving the less file)

@width: 100px; @height: 100px;body {    background:#fff;} . Borderr (@w:50%){    border-radius: @w;} . Demo1 {     width:@width;      height:@height;      . Borderr ();     Background:Red;      padding:10px;}

 

14, webpack using less to generate CSS has been completed.

Webpack Simple Tutorial (2)--use less and create a separate CSS style

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.