(11/24) css进阶：Less文件的打包和分离
寫在前面：在前面我們對(duì)css打包和分離進(jìn)行了描述。此節(jié)我們開(kāi)始學(xué)習(xí)如何對(duì)less文件進(jìn)行打包和分離。
Less 是一門 CSS 預(yù)處理語(yǔ)言，它擴(kuò)展了 CSS 語(yǔ)言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。 Less知識(shí)學(xué)習(xí)
1.Less文件的打包處理
1.1 在src/index.html文件中新增一個(gè)標(biāo)簽，樣式采用less編寫。
<div id="less_part">less</div>1.2 在css目錄下新建一個(gè)less文件，此處為black.less
@base :#000; #less_part{width:300px;height:300px;background-color:@base; }@base是我們?cè)O(shè)置的變量名稱。
1.3 在src目錄下的entry.js中引入less文件
import less from './css/black.less'1.4 安裝Less的服務(wù)
要使用Less，我們要首先安裝Less的服務(wù)，當(dāng)然也是用npm來(lái)進(jìn)行安裝或者cnpm來(lái)安裝。
npm install --save-dev less還需要安裝Less-loader用來(lái)打包使用。
1.5 Less-loader安裝
npm install --save-dev less-loader1.6 配置loader
安裝好后，需要在webpack.config.js里編寫loader配置，當(dāng)然要想正確解析成css，還是需要style-loader和css-loader的幫助，但是這兩個(gè)loader前邊已經(jīng)講過(guò)了，所以在這里就不重復(fù)了，style-loader和css-loader學(xué)習(xí)
webpack.config.js：
//針對(duì).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 打包+啟動(dòng)服務(wù)
使用webpack命令進(jìn)行打包，此時(shí)我們可以發(fā)現(xiàn)，相關(guān)的樣式被打包到了js當(dāng)中。當(dāng)然這是正確的，我們可以使用npm run server命令啟動(dòng)服務(wù)，最終也能正常渲染頁(yè)面，我們的less樣式被正確引用。
?渲染效果：
在實(shí)際開(kāi)發(fā)中我們可能會(huì)把想相關(guān)的css文件與js文件分離開(kāi)來(lái)，以便管理，此處我們把Lees文件進(jìn)行分離。
2.分離Less文件
在上一節(jié)當(dāng)中我們學(xué)習(xí)了extract-text-webpack-plugin這個(gè)插件，也是需要通過(guò)這個(gè)插件來(lái)實(shí)現(xiàn)less文件的分離。 插件的使用
更改上述webpack.config.js文件中針對(duì)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命令重新啟動(dòng)服務(wù)，渲染效果與上面一致。
?
部分源碼：
webpack.config.js:
const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); const htmlPlugin= require('html-webpack-plugin'); const extractTextPlugin = require("extract-text-webpack-plugin"); var website ={publicPath:"http://localhost:1818/" } module.exports={//入口文件的配置項(xiàng) entry:{entry:'./src/entry.js',//這里我們又引入了一個(gè)入口文件entry2:'./src/entry2.js',},//出口文件的配置項(xiàng) output:{//輸出的路徑，用了Node語(yǔ)法path:path.resolve(__dirname,'dist'),//輸出的文件名稱filename:'[name].js',publicPath: website.publicPath},//模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮 module:{rules: [//針對(duì).css的處理配置 {test: /\.css$/,use: extractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},//針對(duì).less的處理配置 {test: /\.less$/,use: extractTextPlugin.extract({use: [{loader: "css-loader"}, {loader: "less-loader"}],// use style-loader in developmentfallback: "style-loader"//extract默認(rèn)行為先使用css-loader編譯css，如果一切順利的話，結(jié)束之后把css導(dǎo)出到規(guī)定的文件去。但是如果編譯過(guò)程中出現(xiàn)了錯(cuò)誤，則繼續(xù)使用vue-style-loader處理css })},{test:/\.(png|jpg|gif)/,use:[{loader:'url-loader',options:{limit:50,outputPath:'images/'//圖片打包到images下 }}]},{test: /\.(htm|html)$/i,use:[ 'html-withimg-loader']}]},//插件，用于生產(chǎn)模版和各項(xiàng)功能 plugins:[// new uglify(),new htmlPlugin({minify:{removeAttributeQuotes:true},hash:true,template:'./src/index.html'}),new extractTextPlugin("css/index.css")],//配置webpack開(kāi)發(fā)服務(wù)功能 devServer:{contentBase:path.resolve(__dirname,'dist'), //絕對(duì)路徑host:'localhost',compress:true,port:1818} } View Codesrc/css/black.less:
@base :#000; #less_part{width:300px;height:300px;background-color:@base; } View Codesrc/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 Codesrc/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 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/wfaceboss/p/10123909.html
總結(jié)
以上是生活随笔為你收集整理的(11/24) css进阶：Less文件的打包和分离的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Kafka团队修改KSQL开源许可，怒怼
- 下一篇： flutter实现（OutlineBut