简介
stylus-resources-loader 是一个 webpack loader，用于将公共 stylus 变量、mixin、函数等资源打包到 webpack 构建后的项目中，避免重复代码，提高项目效率。本篇文章将介绍如何使用 stylus-resources-loader 。
安装
npm install --save-dev stylus-resources-loader
配置
在 webpack 配置文件中引入 stylus-resources-loader ，并在 stylus-loader 后使用。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------------
---- -
---------------
-------------
----------------
-
------- --------------------------
-------- -
---------- --------------------------
-
-
-
-
-
-
-- ---
-其中，resources 为需要打包的资源路径，可以是一个字符串或一个数组，例如：'./path/to/resources.styl' 或 ['./path/to/reset.styl', './path/to/var.styl']。
详细说明
stylus-resources-loader 将打包配置资源到样式中，实现了全局共享变量、函数等的目的。可以将 css reset、主题、文字大小、颜色等样式资源进行配置，方便在整个项目中复用，同时也让样式文件更加简洁的定义。
在 stylus 代码中，你可以使用 @import 来导入资源。
@import 'reset';
@import 'var';
body {
font-size: size;
color: primary;
}在 webpack 做了处理之后，这段代码会被打包成这样。
body {
font-size: 16px;
color: #0078D4;
}这样，你就无需在每个样式文件中都引入这些资源，提高了开发效率，同时代码量也减少了。
当我们需要修改某个公共资源时，只需要在资源文件中修改即可，无需搜寻每个样式文件，修改了对应变量的值，同时又避免了犯错的风险。
总结
使用 stylus-resources-loader ，我们可以方便的在整个项目中共享样式资源。并且，简化了样式文件的定义，提高了开发效率，并减少了代码量。
希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd118