本篇文章帶給大家的內容是關於如何打包和分離less?打包分離less的方法介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
1、安裝less的服務
npm install –save-dev less
2、安裝less-loader打包使用
npm install –save-dev less-loader
3、設定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、src/index.html中插入
<p id="lessLearn"></p> <p><img src="./images/10.jpg"/></p> <p id="pic"></p> <p id="title"></p>
5、寫一個src/css/目錄下black.less檔
@base:#000;#lessLearn{ width:300px; height:200px; background-color:@base;}
6、在src /entry.js中引入less
import less from ‘./css/black.less’
7、刪除dist目錄,輸入webpack進行打包,打包成功後,查看dist/css/index.css裡面並沒有#lessLearn樣式(==打包到了js裡面==)
8、npm run server執行結果
可以在package.json裡面的script裡面的server中加入–open,瀏覽器會自行開啟該頁面
“server”: “webpack-dev-server –open”,
9、若要對entry裡面的js和less進行分離,需要修改webpack-config.js裡面的module下less配置的use進行修改
use:extractTextPlugin.extract({ use:[{ loader:'css-loader' },{ loader:'less-loader' }], fallback:'style-loader' })
修改如下:
10、刪除dist資料夾,webpack打包,會在dist/css/index.css裡面看到less的樣式定義(即把css和js分離)
11、npm run build 執行瀏覽器
相關推薦:
#以上是如何打包和分離less?打包分離less的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!