简介
@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