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

阅读时长 3 分钟读完

简介

@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

纠错
反馈