標籤：樣式 conf tput localhost 訪問 webp src 獨立 demo
在webpack中配置並使用less直接產生css樣式
1、在F盤中建立一個檔案夾webpack-less
2、在檔案夾中建立index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpack demo</title> <link rel="stylesheet" href="dist/index.css"></head><body> <div class="demo1"></div> <script src="dist/bundle.js"></script></body></html>
3、建立index.js
console.log("webpack運行成功!!");require("./index.less");
4、建立index.less
@width:100px;@height:100px;body{ background:#fff;}.borderR(@w:50%){ border-radius: @w;}.demo1{ width:@width; height:@height; .borderR(); background:red;}
5、建立webpack.config.js
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘); //引入分離外掛程式，需要安裝module.exports = { entry: ‘./index.js‘, output:{ path: __dirname + ‘/dist‘, //匯出路徑 publicPath:‘/dist‘, //伺服器路徑 filename:‘./bundle.js‘ //檔案名稱 }, plugins:[ new ExtractTextPlugin(‘./index.css‘) //解析less並分離得到的css ], module:{ rules:[ { test:/\.less$/, use: ExtractTextPlugin.extract([ ‘css-loader‘, ‘less-loader‘ ]) //解析less使用的規則，從右至左執行，即先執行less-loader } ] }}
6、在檔案夾空白處 shift + 右鍵 ，選中在此處開啟命令視窗
7、在命令列中輸入 npm init 設定你的項目資訊。（這裡直接 Enter到結束或者輸入命令 npm init -y） 這裡推薦使用 npm init -y
8、在命令列中輸入 npm install webpack webpack-dev-server --save-dev （局部安裝--推薦） npm install webpack webpack-dev-server --g
9、在命令列中輸入npm i less less-loader css-loader style-loader extract-text-webpack-plugin -D
10、在命令列中輸入webpack 執行編譯
11、在命令列中輸入webpack-dev-server 啟動伺服器。
12、在瀏覽器中輸入http://localhost:8080/index.html 訪問到頁面
13、修改一下index.less (注意查看瀏覽器在儲存less檔案時是否自動重新整理頁面)
@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使用less產生css就已經完成了。
webpack簡單教程(2)--使用less並產生獨立的CSS樣式
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
