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

更新时间：2024年03月16日 14:25:41 作者：Z编程

这篇文章主要介绍了使用webpack处理stylus文件的配置方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.需要下载一个包

npm i stylus-loader

2.功能介绍

stylus-loader:负责将stylus文件编译成css文件

3.配置：

const path = require('path');//nodejs用来处理路径问题的模块
module.exports = {
    /**入口 */
    entry: './src/main.js',
    /**输出 相对路径*/
    output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),
        /**文件名 */
        filename: 'dist.js'
    },
    /**加载器 */
    module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/, //只检测.css文件
                use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
            },
            {
                test: /\.less$/,//只检测.less文件
                //loader:'xxx',loader只能使用一个loader，use可以使用多个loader
                use: ['style-loader', 'css-loader', 'less-loader'],//对检测到文件使用哪些loader
            },
            {
                test: /\.s[ac]ss$/,//只检测.sass文件
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.styl$/,//只检测.stylus文件
                use: ['style-loader', 'css-loader', 'stylus-loader']
            }
        ]
    },
    /**插件 */
    plugins: [
        //plugin配置
    ],
    /**模式 */
    mode: 'development'
}

在module的rules里新增一条规则

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>

执行npx webpack打包

打包成功

查看html文件

到此这篇关于使用webpack处理stylus文件的文章就介绍到这了,更多相关webpack处理stylus文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

利用MutationObserver实现计算首屏时间
在前端开发中，优化页面性能是至关重要的，计算首屏时间是衡量网页性能的重要指标，本文将介绍如何使用MutationObserver来获取首屏时间的最佳实践，感兴趣的可以了解下
2023-07-07
Js为表单动态添加节点内容的方法
这篇文章主要介绍了Js为表单动态添加节点内容的方法,实例分析了js针对表单节点进行添加操作的常用技巧,需要的朋友可以参考下
2015-02-02
JavaScript中如何通过arguments对象实现对象的重载
js 中不存在函数的重载，但却可以通过arguments对象实现对象的重载，下面有个不错的示例，大家可以参考下
2014-05-05
js模拟如何实现重载以及默认参数
这篇文章主要介绍了js模拟如何实现重载以及默认参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
JavaScript前端实现压缩图片功能
这篇文章主要介绍了JavaScript前端实现压缩图片功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
值得收藏的八个常用的js正则表达式
这开发中如果有input输入框，难免就要写正则表达式，因此在这里总结了一些常见常用的正则表达式的书写方法,需要的朋友可以参考下
2018-10-10
js精准计算
这篇文章主要介绍了js精准计算，对此感兴趣的同学，可以实验一下
2021-04-04
浅谈JavaScript超时调用和间歇调用
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。
2015-08-08
Echart折线图手柄触发事件示例详解
这篇文章主要给大家介绍了关于Echart折线图手柄触发事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
如何手动实现es5中的bind方法详解
这篇文章主要给大家介绍了关于如何手动实现es5中的bind方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面小编来一起学习学习吧
2018-12-12