當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

(11/24) css进阶：Less文件的打包和分离

發(fā)布時(shí)間：2025/4/16 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 (11/24) css进阶：Less文件的打包和分离小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

(11/24) css進(jìn)階：Less文件的打包和分離

寫在前面：在前面我們對css打包和分離進(jìn)行了描述。此節(jié)我們開始學(xué)習(xí)如何對less文件進(jìn)行打包和分離。

Less 是一門 CSS 預(yù)處理語言，它擴(kuò)展了 CSS 語言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。 Less知識學(xué)習(xí)

1.Less文件的打包處理

1.1 在src/index.html文件中新增一個(gè)標(biāo)簽，樣式采用less編寫。

1.2 在css目錄下新建一個(gè)less文件，此處為black.less

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

@base是我們設(shè)置的變量名稱。

1.3 在src目錄下的entry.js中引入less文件

import less from './css/black.less'

1.4 安裝Less的服務(wù)

要使用Less，我們要首先安裝Less的服務(wù)，當(dāng)然也是用npm來進(jìn)行安裝或者cnpm來安裝。

npm install --save-dev less

還需要安裝Less-loader用來打包使用。

1.5 Less-loader安裝

npm install --save-dev less-loader

1.6 配置loader

安裝好后，需要在webpack.config.js里編寫loader配置，當(dāng)然要想正確解析成css，還是需要style-loader和css-loader的幫助，但是這兩個(gè)loader前邊已經(jīng)講過了，所以在這里就不重復(fù)了，style-loader和css-loader學(xué)習(xí)

webpack.config.js：

//針對.less的處理配置 {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 }]},

注意上面loader的順序，不要寫反了。

1.7 打包+啟動服務(wù)

使用webpack命令進(jìn)行打包，此時(shí)我們可以發(fā)現(xiàn)，相關(guān)的樣式被打包到了js當(dāng)中。當(dāng)然這是正確的，我們可以使用npm run server命令啟動服務(wù)，最終也能正常渲染頁面，我們的less樣式被正確引用。

?渲染效果：

在實(shí)際開發(fā)中我們可能會把想相關(guān)的css文件與js文件分離開來，以便管理，此處我們把Lees文件進(jìn)行分離。

2.分離Less文件

在上一節(jié)當(dāng)中我們學(xué)習(xí)了extract-text-webpack-plugin這個(gè)插件，也是需要通過這個(gè)插件來實(shí)現(xiàn)less文件的分離。插件的使用

更改上述webpack.config.js文件中針對less文件的配置（使用分離的配置），修改后的代碼為：

{test: /\.less$/,use: extractTextPlugin.extract({use: [{loader: "css-loader"}, {loader: "less-loader"}],// use style-loader in developmentfallback: "style-loader"})},

配置好后，使用webpack命令進(jìn)行打包，此時(shí)less編寫的樣式被分離到了index.css文件里（配置的css打包路徑）。

然后使用npm run server命令重新啟動服務(wù)，渲染效果與上面一致。

部分源碼：

webpack.config.js:

src/css/black.less:

@base :#000; #less_part{width:300px;height:300px;background-color:@base; } View Code

src/index.html:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webpack</title> </head> <body> <div><div id="less_part">less</div><img src="images/wfbin.png"/></div> <div id="img"></div> <div id="title"></div> </body> </html> View Code

src/entry.js(入口文件)：

import css from './css/index.css' import less from './css/black.less' document.getElementById('title').innerHTML='Hello Webpack'; View Code

posted on 2018-12-15 17:37 WFaceBoss 閱讀(...) 評論(...) 編輯收藏

轉(zhuǎn)載于:https://www.cnblogs.com/wfaceboss/p/10123909.html

總結(jié)

以上是生活随笔為你收集整理的(11/24) css进阶：Less文件的打包和分离的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Kafka团队修改KSQL开源许可，怒怼
下一篇： flutter实现（OutlineBut