oa-laravel-elixir-css 是一款用于前端开发的 npm 包，它可以方便地帮助开发者基于 Laravel Elixir 将 Sass 文件编译成 CSS，同时支持自动添加 CSS 前缀，优化 CSS 输出等功能。本文将为大家介绍 oa-laravel-elixir-css 的使用方法和注意事项。
安装
首先，需要在全局安装 Laravel Elixir：
npm install -g laravel-elixir
然后在项目目录下安装 oa-laravel-elixir-css：
npm install oa-laravel-elixir-css --save-dev
配置
在 gulpfile.js 中进行配置。如果原来使用的是 gulp-sass，可以改用 oa-laravel-elixir-css，只需要将原来的 sass 方法改为 oacss 方法：
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.oacss('app.scss'); // 自动编译 app.scss 并将输出保存到 public/css/app.css 中
});可以使用 mix.oacss() 方法指定编译的 Sass 文件路径和输出路径：
mix.oacss('resources/assets/sass/app.scss', 'public/css');如果需要添加 CSS 前缀，可以将 oacss() 方法的第二个参数设为 true：
mix.oacss('app.scss', true); // 自动为 app.scss 输出的 CSS 文件添加前缀还可以在 oacss() 方法中使用第三个参数指定其他选项，例如输出压缩、是否监视文件变化等：
mix.oacss('app.scss', false, { outputStyle: 'compressed', watch: true }); // 自动编译 app.scss 并将输出压缩，同时监视文件变化示例
假设我们有一个 app.scss 文件，其中包含了下面的样式：
$primary-color: #428bca;
.btn {
color: #fff;
background-color: $primary-color;
border-radius: 4px;
padding: 6px 12px;
}执行 gulp 命令后，将自动编译 app.scss 并将输出保存到 public/css/app.css 中：
.btn {
color: #fff;
background-color: #428bca;
border-radius: 4px;
padding: 6px 12px;
}如果我们在 oacss() 方法中指定了第二个参数 true，则会自动为输出的 CSS 文件添加浏览器前缀：
-- -------------------- ---- ------- ---- - ------ ----- ----------------- -------- -------------- ---- -------- --- ----- - ---------------------- - ------- -- -------- -- - ---------- - -------- --- ---- ------------------------- --------------- ----- - ----------- ---------- - ----------------- -------- - ------------ ------------ ----- - -------------------- - ----------------- ----- -
优化输出
与 gulp-sass 不同，oa-laravel-elixir-css 输出的 CSS 默认不会进行优化，例如不会自动删去注释、空格等。如果需要优化输出，可以在 oacss() 函数中设置 outputStyle 选项：
mix.oacss('app.scss', false, { outputStyle: 'compressed' }); // 输出压缩后的 CSS总结
oa-laravel-elixir-css 是一款方便好用的 npm 包，可以大大减少开发者编译 Sass 文件的时间和精力。本文介绍了 oa-laravel-elixir-css 的安装、配置方法以及注意事项，希望对大家在前端开发中起到一定的指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fcd9381d61a3541056