使用webpack處理stylus文件的配置方法

更新時(shí)間：2024年03月16日 14:25:41 作者：Z編程

這篇文章主要介紹了使用webpack處理stylus文件的配置方法，本文通過實(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用來處理路徑問題的模塊
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打包