简介
在前端开发中，样式是非常重要的一部分。为了让样式更优雅、更易维护，我们通常会使用 CSS 预处理器进行开发。但是，使用预处理器会带来一个问题，就是需要将预处理器的代码编译成浏览器可识别的纯 CSS 代码。而 @jamen/dist-css 这个 npm 包，就是为了解决这个问题而开发的。
@jamen/dist-css 是一个能够将预处理器（目前支持 Less、Sass、Stylus）代码编译为压缩后的纯 CSS 代码的 npm 包，使用简单、方便。
安装
在使用 @jamen/dist-css 之前，首先要安装这个 npm 包。安装命令如下：
npm install @jamen/dist-css
使用
使用 @jamen/dist-css 很简单，只需在命令行中输入以下指令即可：
dcc <source> [output]
其中，<source> 表示预处理器代码路径，[output] 表示输出路径，如果不指定输出路径，会将编译后的代码输出到与源代码同目录下。
比如，我们将 LESS 代码编译为 CSS 代码，并输出到指定目录下：
dcc file.less ./dist/file.css
编译成功后，会在指定目录下生成编译后的 CSS 文件。如果没有指定输出路径，会和源代码放在同一个目录下。
示例代码
为了更好地理解 @jamen/dist-css 是如何工作的，我们来看一个示例代码。首先，创建一个 style.less 样式文件：
-- -------------------- ---- ------- ------------ ----- ---- - ----------------- ------------ - ------ - -------- ----- ----------------- -------------------- ----- ------- ----- -------------- ---- ------ ----- ---------- ----- -
然后，在命令行中输入以下指令：
dcc style.less style.css
编译后的 style.css 文件如下：
-- -------------------- ---- -------
-----
---------------------
-
-------
-------------
-------------------------
------------------
-----------
---------------
-----------
-可以看到，@jamen/dist-css 会将 LESS 代码编译成浏览器可识别的 CSS 代码，并且还帮我们压缩了代码，让我们的页面加载更快。
总结
使用 @jamen/dist-css 可以大大简化前端开发中编译 CSS 的流程，同时还能够让样式代码更易于维护。在实际开发中，我们可以根据需要选择合适的预处理器，在代码开发完成后，使用 @jamen/dist-css 将其编译成纯 CSS 代码，从而让我们的网站加载速度更快、性能更优。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bf181e8991b448eba98