Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
