简介
@wpdevops/elixir-stylus 是一个允许使用 Stylus CSS 预处理器的 Laravel Elixir 扩展插件。它可以让开发者更快速地构建 JavaScript 和 CSS 文件，在 Webpack 打包之前使用 Stylus 预处理器自定义样式，以及自动注入所需的资源和 MIME 类型。
安装
首先，需要在项目根目录下使用 npm 安装 @wpdevops/elixir-stylus：
--- ------- ----------------------- ----------
然后，打开 gulpfile.js 文件，并加载插件：
--- ------ - -------------------------- -----------------------------------
使用
编写样式
现在，可以使用 mix.stylus() 方法编写样式文件。默认情况下，该方法从 Laravel Elixir 目录的 resources/assets/stylus 文件夹中读取所有 Stylus 文件，并输出到 public/css 文件夹中。
例如，编写一个 app.styl 文件：
---- ----- -------- ----- ------ ----
使用 .styl 后缀可以让 Laravel Elixir 自动处理该文件。
构建样式
现在，在 gulpfile.js 文件中，可以使用 mix.stylus() 方法来构建样式文件：
-------------------- -
-----------------------
---监听样式变化
在开发过程中，可以使用 mix.stylus() 方法的 watch() 方法来自动编译样式文件：
-------------------- -
-----------------------
------------------------ ------------------------
-----------------------------------------------
---引入外部库
可以使用 @import 来引入外部库：
------- ------------
自动压缩
在生产环境中，可以使用 mix.stylus() 方法的 minify() 方法来自动压缩样式文件：
-------------------- -
-----------------------
------------------------ ------------------------
-- ----------------------- -
--------------------------------
------------------------ ---------------------------------
-
-----------------------------------------------
---这将在编译时自动压缩样式文件，而不需要手动去压缩它们。
结论
使用 @wpdevops/elixir-stylus 可以让开发者更快速地构建 JavaScript 和 CSS 文件，并使用 Stylus 预处理器自动注入所需的资源和 MIME 类型。通过本教程的学习，可以更好地掌握如何使用该插件，并提高 Web 开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005598381e8991b448d7176