npm 包 @wpdevops/elixir-stylus 使用教程

简介

@wpdevops/elixir-stylus 是一个允许使用 Stylus CSS 预处理器的 Laravel Elixir 扩展插件。它可以让开发者更快速地构建 JavaScript 和 CSS 文件，在 Webpack 打包之前使用 Stylus 预处理器自定义样式，以及自动注入所需的资源和 MIME 类型。

安装

首先，需要在项目根目录下使用 npm 安装 @wpdevops/elixir-stylus：

npm install @wpdevops/elixir-stylus --save-dev

然后，打开 gulpfile.js 文件，并加载插件：

var elixir = require('laravel-elixir');
require('@wpdevops/elixir-stylus');

使用

编写样式

现在，可以使用 mix.stylus() 方法编写样式文件。默认情况下，该方法从 Laravel Elixir 目录的 resources/assets/stylus 文件夹中读取所有 Stylus 文件，并输出到 public/css 文件夹中。

例如，编写一个 app.styl 文件：

body
  font: 12px/1.5 serif
  color: #333

使用 .styl 后缀可以让 Laravel Elixir 自动处理该文件。

构建样式

现在，在 gulpfile.js 文件中，可以使用 mix.stylus() 方法来构建样式文件：

elixir(function(mix) {
    mix.stylus('app.styl');
});

监听样式变化

在开发过程中，可以使用 mix.stylus() 方法的 watch() 方法来自动编译样式文件：

elixir(function(mix) {
    mix.stylus('app.styl');
    mix.stylus('admin.styl', 'public/css/admin.css');
    
    mix.watch('resources/assets/stylus/**/*.styl');
});

引入外部库

可以使用 @import 来引入外部库：

@import 'bootstrap';

自动压缩

在生产环境中，可以使用 mix.stylus() 方法的 minify() 方法来自动压缩样式文件：

-- -------------------- ---- -------
-------------------- -
    -----------------------
    ------------------------ ------------------------
    
    -- ----------------------- -
        --------------------------------
        ------------------------ ---------------------------------
    -

    -----------------------------------------------
---

这将在编译时自动压缩样式文件，而不需要手动去压缩它们。

结论

使用 @wpdevops/elixir-stylus 可以让开发者更快速地构建 JavaScript 和 CSS 文件，并使用 Stylus 预处理器自动注入所需的资源和 MIME 类型。通过本教程的学习，可以更好地掌握如何使用该插件，并提高 Web 开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598381e8991b448d7176