使用webpack處理stylus文件的配置方法
更新時(shí)間：2024年03月16日 14:25:41 作者：Z編程
這篇文章主要介紹了使用webpack處理stylus文件的配置方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1.需要下載一個(gè)包
npm i stylus-loader
2.功能介紹
stylus-loader:負(fù)責(zé)將stylus文件編譯成css文件
3.配置：
const path = require('path');//nodejs用來(lái)處理路徑問(wèn)題的模塊
module.exports = {
/**入口 */
entry: './src/main.js',
/**輸出 相對(duì)路徑*/
output: {
/**文件輸出路徑 絕對(duì)路徑*/
//__dirname 表示當(dāng)前文件的文件夾目錄
path: path.resolve(__dirname, 'dist'),
/**文件名 */
filename: 'dist.js'
},
/**加載器 */
module: {
rules: [
//loader的配置
{
/**test 代表要檢測(cè)的文件 */
test: /\.css$/, //只檢測(cè).css文件
use: ['style-loader', 'css-loader'],//對(duì)檢測(cè)到文件使用哪些loader
},
{
test: /\.less$/,//只檢測(cè).less文件
//loader:'xxx',loader只能使用一個(gè)loader，use可以使用多個(gè)loader
use: ['style-loader', 'css-loader', 'less-loader'],//對(duì)檢測(cè)到文件使用哪些loader
},
{
test: /\.s[ac]ss$/,//只檢測(cè).sass文件
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.styl$/,//只檢測(cè).stylus文件
use: ['style-loader', 'css-loader', 'stylus-loader']
}
]
},
/**插件 */
plugins: [
//plugin配置
],
/**模式 */
mode: 'development'
}在module的rules里新增一條規(guī)則
4.新增stylus文件
.box width 100px height 100px background-color:brown
在main.js中引入
import sum from "./js/sum"; import count from "./js/count"; //要想webpack打包資源，必須引入該資源 import "./css/file.css" import "./css/box.less" import "./css/box2.scss" import "./css/box3.styl" console.log(count(1, 2)); console.log(sum(1, 2, 3, 4, 5))
在html中使用box3樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<script src="../../dist/dist.js"></script>
<h1>hell webpack</h1>
<div class="red"></div>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>執(zhí)行npx webpack打包
打包成功
查看html文件
到此這篇關(guān)于使用webpack處理stylus文件的文章就介紹到這了,更多相關(guān)webpack處理stylus文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用MutationObserver實(shí)現(xiàn)計(jì)算首屏?xí)r間
在前端開發(fā)中，優(yōu)化頁(yè)面性能是至關(guān)重要的，計(jì)算首屏?xí)r間是衡量網(wǎng)頁(yè)性能的重要指標(biāo)，本文將介紹如何使用MutationObserver來(lái)獲取首屏?xí)r間的最佳實(shí)踐，感興趣的可以了解下2023-07-07
Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
這篇文章主要介紹了Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法,實(shí)例分析了js針對(duì)表單節(jié)點(diǎn)進(jìn)行添加操作的常用技巧,需要的朋友可以參考下2015-02-02
JavaScript中如何通過(guò)arguments對(duì)象實(shí)現(xiàn)對(duì)象的重載
js 中不存在函數(shù)的重載，但卻可以通過(guò)arguments對(duì)象實(shí)現(xiàn)對(duì)象的重載，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-05-05
js模擬如何實(shí)現(xiàn)重載以及默認(rèn)參數(shù)
這篇文章主要介紹了js模擬如何實(shí)現(xiàn)重載以及默認(rèn)參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
JavaScript前端實(shí)現(xiàn)壓縮圖片功能
這篇文章主要介紹了JavaScript前端實(shí)現(xiàn)壓縮圖片功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這 開發(fā)中如果有input輸入框，難免就要寫正則表達(dá)式，因此在這里總結(jié)了一些常見(jiàn)常用的正則表達(dá)式的書寫方法,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了js精準(zhǔn)計(jì)算，對(duì)此感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-04-04
淺談JavaScript超時(shí)調(diào)用和間歇調(diào)用
JavaScript是單線程語(yǔ)言，但它允許通過(guò)設(shè)置超時(shí)值和間歇時(shí)間值來(lái)調(diào)度代碼在特定的時(shí)刻執(zhí)行。前者是在指定的時(shí)間過(guò)后執(zhí)行代碼，而后者則是每隔指定的時(shí)間就執(zhí)行一次代碼。2015-08-08
這篇文章主要給大家介紹了關(guān)于Echart折線圖手柄觸發(fā)事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
如何手動(dòng)實(shí)現(xiàn)es5中的bind方法詳解
這篇文章主要給大家介紹了關(guān)于如何手動(dòng)實(shí)現(xiàn)es5中的bind方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12